{#include layout}
{#title}Profile – git-shark{/title}
<h1>Profile</h1>
{#if error}
<p class="error">{error}</p>
{/if}
<form method="post" action="/settings/profile">
    <p><label>Username
        <input class="mono" name="username" required pattern="[a-z0-9][a-z0-9-]*" maxlength="39"
               value="{username ?: ''}"></label></p>
    <p><label>Display name <input name="displayName" value="{displayName ?: ''}"></label></p>
    <button class="btn btn-primary">Save</button>
</form>

<h2>Appearance</h2>
<form method="post" action="/settings/profile/appearance">
    <p><label>Content width
        <select name="contentWidth">
            <option value="FULL"{#if contentWidth.name == 'FULL'} selected{/if}>Full (default)</option>
            <option value="COMFORTABLE"{#if contentWidth.name == 'COMFORTABLE'} selected{/if}>Comfortable (1400 px)</option>
            <option value="COMPACT"{#if contentWidth.name == 'COMPACT'} selected{/if}>Compact (1120 px)</option>
        </select></label></p>
    <p class="muted">How wide the app is on large screens. Full spans repository pages across the whole
        screen and caps other pages at 1400 px; Comfortable and Compact center a fixed-width column
        on every page, header included.</p>
    <button class="btn btn-primary">Save</button>
</form>

<h2>Profile picture</h2>
{#if hasAvatar}
<img class="avatar-preview" src="/users/{username}/avatar?v={avatarUpdatedAt.toEpochMilli}" alt="Current profile picture">
{/if}
<form method="post" action="/settings/profile/avatar" enctype="multipart/form-data">
    <p><input type="file" name="avatar" accept="image/png,image/jpeg,image/gif,image/webp" required></p>
    <p class="muted">PNG, JPEG, GIF or WebP, up to 2 MB.</p>
    <button class="btn btn-primary">Upload</button>
</form>
{#if hasAvatar}
<form method="post" action="/settings/profile/avatar/delete"
      onsubmit="return confirm('Remove your profile picture?')">
    <button class="btn btn-danger">Remove picture</button>
</form>
{/if}
{/include}