{% extends "body_base.html" %}
{% block main %}
<style>
  form.htmx-request {
    opacity: 0.5;
  }
</style>
<main class="grow flex flex-col prose container mx-auto mt-2 p-5 sm:mt-4">
  <h1 class="text-center">Account Settings</h1>
  <div class="form-control">
    <label class="label">
      <span class="label-text">Email</span>
    </label>
    <input type="email" name="email" value="{{ user.email }}" class="input text-primary-content input-bordered w-full"
      disabled />
  </div>

  <div class="form-control">
    <label class="label">
      <span class="label-text">API key</span>
    </label>
    {% block api_key_section %}
    {% if user.api_key %}
    <input type="text" name="api-key" value="{{ user.api_key }}"
      class="input text-primary-content input-bordered w-full" disabled />
    <a href="https://www.icloud.com/shortcuts/66985f7b98a74aaeac6ba29c3f1f0960"
      class="btn btn-accent mt-4 w-full">Download
      iOS
      shortcut</a>
    {% else %}
    <button hx-post="/set-api-key" class="btn btn-secondary w-full" hx-swap="outerHTML">
      Create API-Key
    </button>
    {% endif %}
    {% endblock %}
  </div>

  <div class="form-control mt-4">
    <label class="label">
      <span class="label-text">Timezone</span>
    </label>
    {% block timezone_section %}
    <select name="timezone" class="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 %}
  </div>

  <div class="form-control mt-4">
    <button hx-post="/verify-email" class="btn btn-secondary w-full">
      Verify Email
    </button>
  </div>
  <div class="form-control mt-4">
    <button hx-get="/change-password" class="btn btn-primary w-full">
      Change Password
    </button>
  </div>
  <div class="form-control mt-4">
    <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="btn btn-error w-full">
      Delete Account
    </button>
  </div>
  <div id="account-result" class="mt-4"></div>
</main>
{% endblock %}