{% extends 'base.html' %}
{% block content %}
<style>
.profile-layout{display:grid;grid-template-columns:minmax(420px,720px) minmax(320px,460px);gap:1.25rem;align-items:start;max-width:1100px;margin:0}
.profile-layout>.panel,.profile-settings,.profile-settings .auth-card{width:100%;max-width:none;margin:0;box-sizing:border-box}
.profile-settings{display:grid;gap:1.25rem;align-content:start}.profile-settings form{min-width:0}
@media(max-width:900px){.profile-layout{grid-template-columns:1fr;max-width:760px;margin:0}.profile-layout dl{grid-template-columns:minmax(150px,220px) 1fr}}
@media(max-width:600px){.profile-layout dl{grid-template-columns:1fr}.profile-layout dt{border-bottom:0;padding-bottom:2px}.profile-layout dd{padding-top:2px}}
</style>

<div class="toolbar">
  <h1>{{ t('profile.title') }}</h1>
  <a class="button button-secondary" href="/logout">{{ t('app.logout') }}</a>
</div>

<div class="profile-layout">
  <div class="panel profile-panel">
    <dl>
      <dt>{{ t('profile.username') }}</dt><dd>{{ user.username }}</dd>
      <dt>{{ t('profile.display_name') }}</dt><dd>{{ user.display_name or '' }}</dd>
      <dt>{{ t('profile.email') }}</dt><dd>{{ user.email or '' }}</dd>
      <dt>{{ t('profile.source') }}</dt><dd>{{ user.auth_source }}</dd>
      <dt>{{ t('profile.last_login') }}</dt><dd>{% if user.last_login %}<time class="local-time" datetime="{{ utc_iso(user.last_login) }}" data-utc="{{ utc_iso(user.last_login) }}">{{ user.last_login }}</time>{% else %}{{ '' }}{% endif %}</dd>
    </dl>
  </div>

  <div class="profile-settings">
    <form method="post" action="/profile/language" class="auth-card">
      <h2>{{ t('common.language') }}</h2>
      <input type="hidden" name="next_url" value="/profile">
      <label>
        {{ t('common.language') }}
        <select name="language_code">
          {% for language in languages %}
          <option value="{{ language.code }}" {% if language.code == user.language_code %}selected{% endif %}>{{ language.native_name }}</option>
          {% endfor %}
        </select>
      </label>
      <button type="submit">🌐 {{ t('profile.save_language') }}</button>
    </form>

    <form method="post" action="/profile/theme" class="auth-card">
      <h2>{{ t('appearance.theme') }}</h2>
      <p class="table-hint">{{ t('appearance.profile_help') }}</p>
      <input type="hidden" name="next_url" value="/profile">
      <div class="theme-mode-choice">
        <label class="theme-choice-card">
          <input type="radio" name="theme_mode" value="light" {% if user.theme_mode != 'dark' %}checked{% endif %}>
          <span class="theme-choice-preview theme-choice-preview-light" aria-hidden="true"><span></span><span></span></span>
          <strong>☀ {{ t('appearance.light') }}</strong>
        </label>
        <label class="theme-choice-card">
          <input type="radio" name="theme_mode" value="dark" {% if user.theme_mode == 'dark' %}checked{% endif %}>
          <span class="theme-choice-preview theme-choice-preview-dark" aria-hidden="true"><span></span><span></span></span>
          <strong>☾ {{ t('appearance.dark') }}</strong>
        </label>
      </div>
      <button type="submit" class="button button-save" data-save-shortcut>💾 {{ t('common.save') }}</button>
    </form>

    <form method="post" action="/profile/browser-state" class="auth-card"><h2>{{ t('profile.browser_storage') }}</h2><p class="table-hint">{{ t('profile.browser_storage_help') }}</p><label class="checkbox-label"><input type="checkbox" name="persist_browser_state" {% if user.persist_browser_state %}checked{% endif %}>{{ t('profile.browser_storage_enable') }}</label><button type="submit" class="button button-save" data-save-shortcut>💾 {{ t('profile.save_browser_storage') }}</button></form>

    <form method="post" action="/profile/toast-settings" class="auth-card">
      <h2>{{ t('profile.toast_settings') }}</h2>
      <label>{{ t('profile.toast_position') }}
        <select name="toast_position">
          {% for value, label_key in [('top-left','profile.toast_top_left'),('top-center','profile.toast_top_center'),('top-right','profile.toast_top_right'),('bottom-left','profile.toast_bottom_left'),('bottom-center','profile.toast_bottom_center'),('bottom-right','profile.toast_bottom_right')] %}
          <option value="{{ value }}" {% if user.toast_position == value %}selected{% endif %}>{{ t(label_key) }}</option>
          {% endfor %}
        </select>
      </label>
      <label>{{ t('profile.toast_duration') }}
        <input type="number" name="toast_duration_seconds" min="1" max="120" step="1" value="{{ user.toast_duration_seconds or 6 }}" required>
      </label>
      <button type="submit" class="button button-save" data-save-shortcut>💾 {{ t('common.save') }}</button>
    </form>
{% if user.auth_source == 'local' %}
    <form method="post" action="/profile/password" class="auth-card">
      <h2>{{ t('profile.change_password') }}</h2>
      <label>{{ t('profile.current_password') }}<input type="password" name="current_password" required></label>
      <label>{{ t('profile.new_password') }}<input type="password" name="new_password" minlength="8" required></label>
      <button type="submit">🔑 {{ t('profile.change_password') }}</button>
    </form>
    {% endif %}
  </div>
</div>
{% endblock %}