{% include 'public/partials/header.html' %}<main class="wrap page-shell usercp-shell">{% include 'usercp/partials/banner.html' %}<div class="ucp-grid">{% include 'usercp/partials/sidebar.html' %}<div class="ucp-main"><section class="ucp-page-heading"><div><span class="eyebrow">Appearance</span><h2>Avatar & locale</h2><p>Upload an avatar, drag and drop an image, link one from the web, or keep your initial.</p></div></section><form method="post" action="{{ $baseUrl }}/usercp/appearance" class="ucp-settings-form" enctype="multipart/form-data"><input type="hidden" name="_token" value="{{ $csrfToken }}"><input type="hidden" name="avatar_mode" value="keep" data-avatar-mode><section class="panel ucp-card"><header class="ucp-card-head"><div class="ucp-card-icon">◈</div><div><h3>Profile avatar</h3><p>Your group controls available methods and upload limits.</p></div></header><div class="ucp-card-body"><div class="avatar-manager"><div class="avatar-current">{% if $member['avatar_url'] %}<img data-avatar-preview src="{{ str_starts_with($member['avatar_url'],'/')?$baseUrl.$member['avatar_url']:$member['avatar_url'] }}" alt="Current avatar">{% else %}<span data-avatar-fallback style="--avatar-color:{{ $member['avatar_color'] ?: '#f0a500' }}">{{ strtoupper(substr($member['username'],0,1)) }}</span>{% endif %}<small>Current avatar</small></div><div class="avatar-manager-main"><div class="avatar-method-tabs"><button type="button" class="active" data-avatar-tab="initial">Initial</button>{% if $member['can_upload_avatar'] %}<button type="button" data-avatar-tab="upload">Upload</button>{% endif %}{% if $member['can_link_avatar'] %}<button type="button" data-avatar-tab="link">Link</button>{% endif %}</div><div class="avatar-pane active" data-avatar-pane="initial"><strong>Initial avatar</strong><p>Use your username initial and choose an accent color.</p><div class="avatar-swatches">{% foreach ['#f0a500','#2f81f7','#3fb950','#a371f7','#f85149','#db61a2','#39c5cf','#8b949e'] as $color %}<label style="--swatch:{{ $color }}"><input type="radio" name="avatar_color" value="{{ $color }}" {{ strtolower($member['avatar_color'])===strtolower($color)?'checked':'' }}><i></i></label>{% endforeach %}</div><button class="btn secondary" type="button" data-avatar-use-initial>Use initial avatar</button></div>{% if $member['can_upload_avatar'] %}<div class="avatar-pane" data-avatar-pane="upload"><label class="avatar-dropzone" data-avatar-dropzone><input type="file" name="avatar_file" accept="image/jpeg,image/png,image/gif,image/webp" data-avatar-file><span>⇧</span><strong>Drop an image here</strong><small>or click to browse</small></label><p class="avatar-limit">JPG, PNG, GIF, or WebP · up to {{ round($member['avatar_max_bytes']/1048576,2) }} MB · maximum {{ $member['avatar_max_width'] }}×{{ $member['avatar_max_height'] }} px</p></div>{% endif %}{% if $member['can_link_avatar'] %}<div class="avatar-pane" data-avatar-pane="link"><label><span>Direct image URL</span><input class="input" type="url" name="avatar_link" maxlength="1000" placeholder="https://example.com/avatar.png" data-avatar-link></label><button class="btn secondary" type="button" data-avatar-use-link>Use linked avatar</button><p class="avatar-limit">Only HTTP and HTTPS links are accepted. Remote images are displayed within your group’s avatar dimensions.</p></div>{% endif %}<button class="avatar-remove" type="button" data-avatar-remove>Remove custom avatar</button></div></div></div></section><section class="panel ucp-card"><header class="ucp-card-head"><div class="ucp-card-icon">◷</div><div><h3>Timezone & dates</h3><p>Forum timestamps and calendar events use this timezone.</p></div></header><div class="ucp-card-body form-grid two"><label><span>Timezone</span><select class="select" name="timezone">{% foreach $timezones as $zone %}<option value="{{ $zone }}" {{ ($member['timezone'] ?: 'UTC')===$zone?'selected':'' }}>{{ $zone }}</option>{% endforeach %}</select></label><div class="ucp-info-tile"><i>◷</i><div><strong>Server time preview</strong><span>{{ date('M j, Y · g:i A') }}</span></div></div></div></section><footer class="ucp-sticky-actions"><span><b>Appearance settings</b><small>Avatar and timezone preferences.</small></span><button class="btn primary" type="submit">Save Appearance</button></footer></form></div></div></main>{% include 'public/partials/footer.html' %}