{% extends "auth/_settings_layout.html" %}

{% block settings_header %}
  <h1 class="text-xl font-extrabold tracking-tight">Account Settings</h1>
{% endblock %}

{% block settings_left_column %}
  <label class="w-full">
    <div class="text-xs uppercase tracking-wide opacity-70 mb-1">Email</div>
    <input type="email" name="email" value="{{ user.email }}" class="nb-input w-full" disabled />
  </label>

  <label class="w-full">
    <div class="text-xs uppercase tracking-wide opacity-70 mb-1">API Key</div>
    {% block api_key_section %}
    {% if user.api_key %}
    <div class="relative">
      <input id="api_key_input" type="text" name="api_key" value="{{ user.api_key }}"
        class="nb-input w-full pr-14" disabled />
      <button type="button" id="copy_api_key_btn" onclick="copy_api_key()"
        class="absolute inset-y-0 right-0 flex items-center px-2 nb-btn btn-sm" aria-label="Copy API key"
        title="Copy API key">
        {% include "icons/clipboard_icon.html" %}
      </button>
    </div>
    <a href="https://www.icloud.com/shortcuts/66985f7b98a74aaeac6ba29c3f1f0960"
      class="nb-btn nb-cta mt-2 w-full">Download iOS shortcut</a>
    {% else %}
    <button hx-post="/set-api-key" class="nb-btn nb-cta w-full" hx-swap="outerHTML">Create API-Key</button>
    {% endif %}
    {% endblock %}
  </label>

  <script>
    function copy_api_key() {
      const input = document.getElementById('api_key_input');
      if (!input) return;
      if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(input.value)
          .then(() => show_toast('API key copied!', 'success'))
          .catch(() => show_toast('Copy failed', 'error'));
      } else {
        show_toast('Copy not supported', 'info');
      }
    }
  </script>

  <label class="w-full">
    <div class="text-xs uppercase tracking-wide opacity-70 mb-1">Timezone</div>
    {% block timezone_section %}
    <select name="timezone" class="nb-select w-full" hx-patch="/update-timezone" hx-swap="outerHTML">
      {% for tz in timezones %}
      <option value="{{ tz }}" {% if tz==user.timezone %}selected{% endif %}>{{ tz }}</option>
      {% endfor %}
    </select>
    {% endblock %}
  </label>

  <label class="w-full">
    <div class="text-xs uppercase tracking-wide opacity-70 mb-1">Theme</div>
    {% block theme_section %}
    <select name="theme" class="nb-select w-full" hx-patch="/update-theme" hx-swap="outerHTML">
      {% for option in theme_options %}
      <option value="{{ option }}" {% if option==user.theme %}selected{% endif %}>{{ option }}</option>
      {% endfor %}
    </select>
    <script>
      document.documentElement.setAttribute('data-theme-preference', '{{ user.theme }}');
    </script>
    {% endblock %}
  </label>
{% endblock %}

{% block settings_right_column %}
  <div>
    {% block change_password_section %}
    <button hx-get="/change-password" hx-swap="outerHTML" class="nb-btn w-full">Change Password</button>
    {% endblock %}
  </div>

  <div>
    <button hx-delete="/delete-account"
      hx-confirm="This action will permanently delete your account and all data associated. Are you sure you want to continue?"
      class="nb-btn btn-error w-full">Delete Account</button>
  </div>
{% endblock %}