{% extends "attendance/base.html" %}
{% block content %}
<h1 class="h4 mb-3">{{ target.name }} <span class="text-body-secondary fs-6">{{ target.email }}</span></h1>
<div class="row g-3">
  <div class="col-lg-6 d-flex flex-column gap-3">
    {% if balances %}{% include "attendance/partials/balances.html" %}{% endif %}
    <div class="app-card">
      <div class="fw-semibold mb-1">{% t "Balance snapshot" %}</div>
      {% if target.remark.tracking %}
      <p class="small text-body-secondary">{% t "Copy the balances from your payslip and the date they refer to." %}</p>
      {% if snapshot_error %}<div class="alert alert-danger py-2 small">{{ snapshot_error }}</div>{% endif %}
      {% if snapshot_message %}<div class="alert alert-success py-2 small">{{ snapshot_message }}</div>{% endif %}
      <form method="post" class="row g-2 align-items-end">
        {% csrf_token %}<input type="hidden" name="action" value="snapshot">
        <div class="col-sm-4"><label class="form-label small mb-0">{% t "Snapshot date" %}</label><input type="date" name="snapshot_date" class="form-control" value="{{ target.remark.snapshot_date|date:'Y-m-d' }}" required></div>
        <div class="col-sm-3 col-6"><label class="form-label small mb-0">{% t "Vacation hours" %}</label><input type="number" step="0.01" name="vacation_hours" class="form-control" value="{{ target.remark.vacation_hours|default_if_none:'' }}" required></div>
        <div class="col-sm-3 col-6"><label class="form-label small mb-0">{% t "Permit hours" %}</label><input type="number" step="0.01" name="permit_hours" class="form-control" value="{{ target.remark.permit_hours|default_if_none:'' }}" required></div>
        <div class="col-sm-2 d-grid"><button class="btn btn-primary">{% t "Save" %}</button></div>
      </form>
      {% else %}<p class="small text-body-secondary mb-0">{% t "Balance tracking is disabled." %}</p>{% endif %}
    </div>
    <div class="app-card">
      <div class="fw-semibold mb-2">{% t "Planned hours" %}</div>
      <div class="d-flex gap-2 flex-wrap">{% for name, minutes in planned_week %}
        <div class="text-center px-2"><div class="stat-label">{{ name|tr }}</div><div class="fw-semibold">{{ minutes|hm }}</div></div>{% endfor %}
      </div>
    </div>
  </div>
  <div class="col-lg-6 d-flex flex-column gap-3">
    <div class="app-card">
      <div class="fw-semibold mb-2">{% t "Preferences" %}</div>
      <label class="form-label small mb-0" for="ui-lang">{% t "Language" %}</label>
      <select id="ui-lang" class="form-select w-auto" onchange="Badgr.setLanguage(this.value)">
        <option value="en" {% if lang == "en" %}selected{% endif %}>English</option>
        <option value="it" {% if lang == "it" %}selected{% endif %}>Italiano</option>
      </select>
      <label class="form-label small mb-0 mt-2" for="ui-theme">{% t "Theme" %}</label>
      <select id="ui-theme" class="form-select w-auto" x-data x-init="$el.value = Badgr.theme()" onchange="Badgr.setTheme(this.value)">
        <option value="auto">{% t "Auto" %}</option>
        <option value="light">{% t "Light" %}</option>
        <option value="dark">{% t "Dark" %}</option>
      </select>
      <div class="form-text">{% t "Saved in this browser." %}</div>
    </div>
    {% if calendar_available %}
    <div class="app-card">
      <div class="d-flex justify-content-between align-items-center mb-2">
        <div class="fw-semibold"><i class="bi bi-calendar-check me-1"></i>{% t "Outlook calendar" %}</div>
        {% if calendar.enabled %}<span class="badge text-bg-success">{% t "Active" %} · {% t "since" %} {{ calendar.enabled_at|date:"d/m/Y" }}</span>{% endif %}
      </div>
      {% if calendar.enabled and calendar.last_error %}<div class="alert alert-warning py-2 small text-break">{% t "Calendar event not created" %} ({{ calendar.last_error_at|date:"d/m/Y H:i" }}): {{ calendar.last_error }}</div>{% endif %}
      <p class="small mb-2">{% t "Calendar Sync intro" %}</p>
      <ul class="small text-body-secondary ps-3">
        <li>{% t "Calendar Sync note create-only" %}</li>
        <li>{% t "Calendar Sync note auto-replies" %}</li>
        <li>{% t "Calendar Sync note CrossChex" %}</li>
      </ul>
      <form method="post">
        {% csrf_token %}
        {% if calendar.enabled %}<button class="btn btn-outline-danger" name="action" value="calendar_off" data-confirm="{% t 'Calendar Sync off confirm' %}" onclick="return confirm(this.dataset.confirm)">{% t "Turn off" %}</button>
        {% else %}<button class="btn btn-primary" name="action" value="calendar_on">{% t "Turn on" %}</button>{% endif %}
      </form>
    </div>
    {% endif %}
    <div class="app-card">
      <div class="fw-semibold mb-2">{% t "Change password" %}</div>
      {% if password_error %}<div class="alert alert-danger py-2 small">{{ password_error }}</div>{% endif %}
      {% if password_message %}<div class="alert alert-success py-2 small">{{ password_message }}</div>{% endif %}
      <form method="post" class="d-flex flex-column gap-2">
        {% csrf_token %}<input type="hidden" name="action" value="password">
        <input type="email" name="username" value="{{ target.email }}" autocomplete="username" hidden>
        {% if target.has_password %}<div><label class="form-label small mb-0">{% t "Current password" %}</label><input type="password" name="current" class="form-control" autocomplete="current-password" required></div>{% endif %}
        <div><label class="form-label small mb-0">{% t "New password" %}</label><input type="password" name="new" class="form-control" minlength="10" autocomplete="new-password" required></div>
        <div><label class="form-label small mb-0">{% t "Repeat password" %}</label><input type="password" name="repeat" class="form-control" minlength="10" autocomplete="new-password" required></div>
        <button class="btn btn-primary align-self-start">{% t "Save" %}</button>
      </form>
    </div>
  </div>
</div>
{% endblock %}