{% include 'public/partials/header.html' %}
<main class="wrap page-shell usercp-shell">
  <div class="breadcrumb"><a href="{{ $baseUrl }}/">FORUM INDEX</a><span>›</span><span>USER CONTROL PANEL</span></div>

  <section class="ucp-banner panel">
    <div class="ucp-banner-profile">
      <span class="ucp-banner-avatar" style="--avatar-color:{{ $member['avatar_color'] ?: '#f0a500' }}">{{ strtoupper(substr($member['username'],0,1)) }}<i></i></span>
      <div><div class="eyebrow">Account Center</div><h1>{{ $member['username'] }}</h1><p>{{ $member['group_name'] ?: $member['role'] }} · Member since {{ date('F Y',strtotime($member['joined_at'])) }}</p></div>
    </div>
    <div class="ucp-banner-stats"><article><strong>{{ number_format($member['post_count']) }}</strong><span>Posts</span></article><article><strong>{{ $unreadMessages }}</strong><span>Unread PMs</span></article><article><strong>{{ $onlineTotal }}</strong><span>Online now</span></article></div>
  </section>

  <div class="ucp-grid">
    <aside class="ucp-sidebar panel">
      <div class="ucp-sidebar-title"><span>☷</span><div><strong>User CP</strong><small>Account preferences</small></div></div>
      <nav data-ucp-nav>
        <span class="ucp-nav-label">ACCOUNT</span>
        <a class="active" href="#profile"><i>♙</i><span><b>Profile</b><small>Public details</small></span></a>
        <a href="#appearance"><i>◈</i><span><b>Appearance</b><small>Avatar and timezone</small></span></a>
        <a href="#privacy"><i>◉</i><span><b>Privacy</b><small>Visibility and contact</small></span></a>
        <a href="#security"><i>◇</i><span><b>Security</b><small>Password settings</small></span></a>
        <span class="ucp-nav-label">COMMUNITY</span>
        <a href="{{ $baseUrl }}/messages"><i>✉</i><span><b>Private Messages</b><small>{{ $unreadMessages }} unread</small></span>{% if $unreadMessages %}<em>{{ $unreadMessages }}</em>{% endif %}</a>
        <a href="#activity"><i>▤</i><span><b>My Activity</b><small>Posts and topics</small></span></a>
        <a href="#subscriptions"><i>▱</i><span><b>Subscriptions</b><small>Watched content</small></span></a>
      </nav>
      <div class="ucp-sidebar-foot"><i class="status-dot"></i><span>Account in good standing</span></div>
    </aside>

    <div class="ucp-main">
      <section class="ucp-page-heading"><div><span class="eyebrow">Profile settings</span><h2>Personal details</h2><p>Manage the information and preferences connected to your community account.</p></div><span class="ucp-save-note">Changes are applied immediately</span></section>

      <form method="post" action="{{ $baseUrl }}/usercp/profile" class="ucp-settings-form">
        <input type="hidden" name="_token" value="{{ $csrfToken }}">
        <section id="profile" class="panel ucp-card">
          <header class="ucp-card-head"><div class="ucp-card-icon">♙</div><div><h3>Profile information</h3><p>These details appear on your member profile and beside your forum activity.</p></div></header>
          <div class="ucp-card-body">
            <div class="ucp-avatar-editor">
              <span class="avatar-preview" style="--avatar-color:{{ $member['avatar_color'] ?: '#f0a500' }}">{{ strtoupper(substr($member['username'],0,1)) }}</span>
              <div><strong>Profile avatar</strong><p>Choose an accent color for the generated initial avatar when no custom image is set.</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></div>
            </div>
            <div class="form-grid two"><label><span>Username</span><input class="input" value="{{ $member['username'] }}" disabled><small>Contact an administrator to change your username.</small></label><label><span>Email address</span><input class="input" type="email" name="email" value="{{ $member['email'] }}" required></label><label><span>Location</span><input class="input" name="location" maxlength="120" value="{{ $member['location'] }}" placeholder="City, region, or country"></label><label><span>Website</span><input class="input" name="website" maxlength="255" value="{{ $member['website'] }}" placeholder="https://example.com"></label></div>
            <label class="ucp-field"><span>About me</span><textarea class="input usercp-textarea" name="bio" maxlength="1000" placeholder="Tell the community a little about yourself…">{{ $member['bio'] }}</textarea><small>Up to 1,000 characters.</small></label>
            <label class="ucp-field"><span>Forum signature</span><textarea class="input usercp-textarea compact" name="signature" maxlength="500" placeholder="Displayed beneath your forum posts.">{{ $member['signature'] }}</textarea><small>Up to 500 characters.</small></label>
          </div>
        </section>

        <section id="appearance" class="panel ucp-card">
          <header class="ucp-card-head"><div class="ucp-card-icon">◈</div><div><h3>Appearance & locale</h3><p>Choose how dates and your account identity appear around the board.</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><small>Used for forum timestamps and calendar events.</small></label><div class="ucp-info-tile"><i>◷</i><div><strong>Local time preview</strong><span>{{ date('M j, Y · g:i A') }}</span></div></div></div>
        </section>

        <section id="privacy" class="panel ucp-card">
          <header class="ucp-card-head"><div class="ucp-card-icon">◉</div><div><h3>Privacy & communication</h3><p>Control profile visibility and how other members can contact you.</p></div></header>
          <div class="ucp-card-body"><label class="ucp-field"><span>Profile visibility</span><select class="select" name="profile_visibility"><option value="public" {{ $member['profile_visibility']==='public'?'selected':'' }}>Everyone</option><option value="members" {{ $member['profile_visibility']==='members'?'selected':'' }}>Registered members</option><option value="private" {{ $member['profile_visibility']==='private'?'selected':'' }}>Only me and staff</option></select></label>
            <div class="preference-list"><label><span><strong>Show email on profile</strong><small>Your address stays hidden unless this option is enabled.</small></span><input type="checkbox" name="show_email" value="1" {{ $member['show_email']?'checked':'' }}></label><label><span><strong>Allow private messages</strong><small>Allow registered members to start new conversations with you.</small></span><input type="checkbox" name="allow_pm" value="1" {{ $member['allow_pm']?'checked':'' }}></label></div>
          </div>
        </section>
        <footer class="ucp-sticky-actions"><span><b>Profile preferences</b><small>Review your changes before saving.</small></span><button class="btn primary" type="submit">Save Changes</button></footer>
      </form>

      <form id="security" method="post" action="{{ $baseUrl }}/usercp/password" class="panel ucp-card security-form">
        <input type="hidden" name="_token" value="{{ $csrfToken }}">
        <header class="ucp-card-head"><div class="ucp-card-icon danger">◇</div><div><h3>Password & security</h3><p>Changing your password signs out all persistent remembered sessions.</p></div></header>
        <div class="ucp-card-body"><div class="form-grid"><label><span>Current password</span><input class="input" type="password" name="current_password" autocomplete="current-password" required></label><label><span>New password</span><input class="input" type="password" name="new_password" minlength="8" autocomplete="new-password" required></label><label><span>Confirm new password</span><input class="input" type="password" name="confirm_password" minlength="8" autocomplete="new-password" required></label></div></div>
        <footer class="ucp-card-footer"><button class="btn" type="submit">Update Password</button></footer>
      </form>

      <section id="activity" class="panel ucp-placeholder"><i>▤</i><div><h3>My activity</h3><p>Topic and post history will be connected in the next account-area pass.</p></div></section>
      <section id="subscriptions" class="panel ucp-placeholder"><i>▱</i><div><h3>Subscriptions</h3><p>Watched topics and notification preferences will appear here.</p></div></section>
    </div>
  </div>
</main>
{% include 'public/partials/footer.html' %}