{% extends "base.html" %}
{% block title %}{% if action == 'add' %}Add Person{% else %}Edit {{ person.name }}{% endif %} - astro-mcp{% endblock %}
{% block content %}
<h1>{% if action == 'add' %}Add Person{% else %}Edit {{ person.name }}{% endif %}</h1>

<div class="toolbar">
  {% if action == 'edit' %}
  <a href="/dashboard/persons/{{ person.id }}" class="btn btn-ghost">← Back</a>
  {% else %}
  <a href="/dashboard/persons" class="btn btn-ghost">← Back</a>
  {% endif %}
</div>

<form method="post" id="person-form"
  {% if action == 'add' %}
  action="/dashboard/persons"
  {% else %}
  action="/dashboard/persons/{{ person.id }}"
  {% endif %}
>
  <div class="card">
    <h2>Identity</h2>
    <div class="form-row">
      <div class="form-group">
        <label for="name">Full Name *</label>
        <input type="text" id="name" name="name" required
          value="{{ person.name if person else '' }}">
      </div>
      <div class="form-group">
        <label for="nickname">Nickname</label>
        <input type="text" id="nickname" name="nickname"
          value="{{ person.nickname if person else '' }}">
        <div class="form-hint">Short name for quick lookup</div>
      </div>
    </div>
    <div class="form-group">
      <label for="description">Description</label>
      <input type="text" id="description" name="description"
        value="{{ person.description if person else '' }}"
        placeholder="e.g. My sister, Client A, Famous person...">
    </div>
    <div class="form-row">
      <div class="form-group">
        <label for="gender">Gender</label>
        <select id="gender" name="gender">
          <option value="" {% if not person or not person.gender %}selected{% endif %}>—</option>
          <option value="male" {% if person and person.gender == 'male' %}selected{% endif %}>male</option>
          <option value="female" {% if person and person.gender == 'female' %}selected{% endif %}>female</option>
          <option value="other" {% if person and person.gender == 'other' %}selected{% endif %}>other</option>
        </select>
      </div>
      <div class="form-group">
        <label for="alive">Status</label>
        <select id="alive" name="alive">
          <option value="true" {% if not person or person.alive %}selected{% endif %}>Alive</option>
          <option value="false" {% if person and not person.alive %}selected{% endif %}>Deceased</option>
        </select>
      </div>
      <div class="form-group">
        <label for="private">Visibility</label>
        <select id="private" name="private">
          <option value="false" {% if not person or not person.private %}selected{% endif %}>Visible</option>
          <option value="true" {% if person and person.private %}selected{% endif %}>Private</option>
        </select>
      </div>
    </div>
  </div>

  <div class="card">
    <h2>Birth Data *</h2>
    <div class="form-row">
      <div class="form-group">
        <label for="birth_date">Birth Date *</label>
        <input type="date" id="birth_date" required
          value="{{ person.birth_datetime[:10] if person and person.birth_datetime else '' }}">
      </div>
      <div class="form-group">
        <label for="birth_time">Birth Time *</label>
        {% if is_24h | default(true) %}
        <input type="time" id="birth_time" required step="1"
          value="{{ person.birth_datetime[11:16] if person and person.birth_datetime else '' }}">
        <div class="form-hint">HH:MM (24h format)</div>
        {% else %}
        <div style="display:flex;gap:0.5rem;align-items:center">
          <input type="text" id="birth_time" name="birth_time" required
            value="{{ person.birth_datetime[11:16] if person and person.birth_datetime else '' }}"
            placeholder="HH:MM" pattern="[0-9]{1,2}:[0-9]{2}" style="max-width:100px">
          <select id="birth_ampm" name="birth_ampm" style="width:80px">
            <option value="AM">AM</option>
            <option value="PM">PM</option>
          </select>
        </div>
        <div class="form-hint">HH:MM AM/PM (12h format)</div>
        {% endif %}
      </div>
      <div class="form-group">
        <label for="tz">Timezone *</label>
        <select id="tz" name="tz" required>
          <option value="">— select —</option>
          <optgroup label="Europe">
            <option value="Europe/Vienna" {% if person and person.timezone == 'Europe/Vienna' %}selected{% endif %}>Europe/Vienna (CET/CEST)</option>
            <option value="Europe/Berlin" {% if person and person.timezone == 'Europe/Berlin' %}selected{% endif %}>Europe/Berlin (CET/CEST)</option>
            <option value="Europe/Zurich" {% if person and person.timezone == 'Europe/Zurich' %}selected{% endif %}>Europe/Zurich (CET/CEST)</option>
            <option value="Europe/London" {% if person and person.timezone == 'Europe/London' %}selected{% endif %}>Europe/London (GMT/BST)</option>
            <option value="Europe/Paris" {% if person and person.timezone == 'Europe/Paris' %}selected{% endif %}>Europe/Paris (CET/CEST)</option>
            <option value="Europe/Amsterdam" {% if person and person.timezone == 'Europe/Amsterdam' %}selected{% endif %}>Europe/Amsterdam (CET/CEST)</option>
            <option value="Europe/Brussels" {% if person and person.timezone == 'Europe/Brussels' %}selected{% endif %}>Europe/Brussels (CET/CEST)</option>
            <option value="Europe/Madrid" {% if person and person.timezone == 'Europe/Madrid' %}selected{% endif %}>Europe/Madrid (CET/CEST)</option>
            <option value="Europe/Rome" {% if person and person.timezone == 'Europe/Rome' %}selected{% endif %}>Europe/Rome (CET/CEST)</option>
            <option value="Europe/Stockholm" {% if person and person.timezone == 'Europe/Stockholm' %}selected{% endif %}>Europe/Stockholm (CET/CEST)</option>
            <option value="Europe/Oslo" {% if person and person.timezone == 'Europe/Oslo' %}selected{% endif %}>Europe/Oslo (CET/CEST)</option>
            <option value="Europe/Copenhagen" {% if person and person.timezone == 'Europe/Copenhagen' %}selected{% endif %}>Europe/Copenhagen (CET/CEST)</option>
            <option value="Europe/Warsaw" {% if person and person.timezone == 'Europe/Warsaw' %}selected{% endif %}>Europe/Warsaw (CET/CEST)</option>
            <option value="Europe/Prague" {% if person and person.timezone == 'Europe/Prague' %}selected{% endif %}>Europe/Prague (CET/CEST)</option>
            <option value="Europe/Budapest" {% if person and person.timezone == 'Europe/Budapest' %}selected{% endif %}>Europe/Budapest (CET/CEST)</option>
            <option value="Europe/Athens" {% if person and person.timezone == 'Europe/Athens' %}selected{% endif %}>Europe/Athens (EET/EEST)</option>
            <option value="Europe/Helsinki" {% if person and person.timezone == 'Europe/Helsinki' %}selected{% endif %}>Europe/Helsinki (EET/EEST)</option>
            <option value="Europe/Moscow" {% if person and person.timezone == 'Europe/Moscow' %}selected{% endif %}>Europe/Moscow (MSK)</option>
            <option value="Europe/Istanbul" {% if person and person.timezone == 'Europe/Istanbul' %}selected{% endif %}>Europe/Istanbul (TRT)</option>
            <option value="Europe/Lisbon" {% if person and person.timezone == 'Europe/Lisbon' %}selected{% endif %}>Europe/Lisbon (WET/WEST)</option>
            <option value="Europe/Dublin" {% if person and person.timezone == 'Europe/Dublin' %}selected{% endif %}>Europe/Dublin (GMT/IST)</option>
            <option value="Europe/Zagreb" {% if person and person.timezone == 'Europe/Zagreb' %}selected{% endif %}>Europe/Zagreb (CET/CEST)</option>
            <option value="Europe/Bucharest" {% if person and person.timezone == 'Europe/Bucharest' %}selected{% endif %}>Europe/Bucharest (EET/EEST)</option>
            <option value="Europe/Sofia" {% if person and person.timezone == 'Europe/Sofia' %}selected{% endif %}>Europe/Sofia (EET/EEST)</option>
          </optgroup>
          <optgroup label="Americas">
            <option value="America/New_York" {% if person and person.timezone == 'America/New_York' %}selected{% endif %}>America/New_York (ET)</option>
            <option value="America/Chicago" {% if person and person.timezone == 'America/Chicago' %}selected{% endif %}>America/Chicago (CT)</option>
            <option value="America/Denver" {% if person and person.timezone == 'America/Denver' %}selected{% endif %}>America/Denver (MT)</option>
            <option value="America/Los_Angeles" {% if person and person.timezone == 'America/Los_Angeles' %}selected{% endif %}>America/Los_Angeles (PT)</option>
            <option value="America/Toronto" {% if person and person.timezone == 'America/Toronto' %}selected{% endif %}>America/Toronto (ET)</option>
            <option value="America/Vancouver" {% if person and person.timezone == 'America/Vancouver' %}selected{% endif %}>America/Vancouver (PT)</option>
            <option value="America/Mexico_City" {% if person and person.timezone == 'America/Mexico_City' %}selected{% endif %}>America/Mexico_City (CT)</option>
            <option value="America/Sao_Paulo" {% if person and person.timezone == 'America/Sao_Paulo' %}selected{% endif %}>America/Sao_Paulo (BRT)</option>
            <option value="America/Buenos_Aires" {% if person and person.timezone == 'America/Buenos_Aires' %}selected{% endif %}>America/Buenos_Aires (ART)</option>
            <option value="America/Bogota" {% if person and person.timezone == 'America/Bogota' %}selected{% endif %}>America/Bogota (COT)</option>
          </optgroup>
          <optgroup label="Asia & Oceania">
            <option value="Asia/Tokyo" {% if person and person.timezone == 'Asia/Tokyo' %}selected{% endif %}>Asia/Tokyo (JST)</option>
            <option value="Asia/Shanghai" {% if person and person.timezone == 'Asia/Shanghai' %}selected{% endif %}>Asia/Shanghai (CST)</option>
            <option value="Asia/Hong_Kong" {% if person and person.timezone == 'Asia/Hong_Kong' %}selected{% endif %}>Asia/Hong_Kong (HKT)</option>
            <option value="Asia/Singapore" {% if person and person.timezone == 'Asia/Singapore' %}selected{% endif %}>Asia/Singapore (SGT)</option>
            <option value="Asia/Kolkata" {% if person and person.timezone == 'Asia/Kolkata' %}selected{% endif %}>Asia/Kolkata (IST)</option>
            <option value="Asia/Dubai" {% if person and person.timezone == 'Asia/Dubai' %}selected{% endif %}>Asia/Dubai (GST)</option>
            <option value="Asia/Bangkok" {% if person and person.timezone == 'Asia/Bangkok' %}selected{% endif %}>Asia/Bangkok (ICT)</option>
            <option value="Asia/Seoul" {% if person and person.timezone == 'Asia/Seoul' %}selected{% endif %}>Asia/Seoul (KST)</option>
            <option value="Australia/Sydney" {% if person and person.timezone == 'Australia/Sydney' %}selected{% endif %}>Australia/Sydney (AEST/AEDT)</option>
            <option value="Australia/Melbourne" {% if person and person.timezone == 'Australia/Melbourne' %}selected{% endif %}>Australia/Melbourne (AEST/AEDT)</option>
            <option value="Australia/Perth" {% if person and person.timezone == 'Australia/Perth' %}selected{% endif %}>Australia/Perth (AWST)</option>
            <option value="Pacific/Auckland" {% if person and person.timezone == 'Pacific/Auckland' %}selected{% endif %}>Pacific/Auckland (NZST/NZDT)</option>
          </optgroup>
          <optgroup label="Africa & Middle East">
            <option value="Africa/Cairo" {% if person and person.timezone == 'Africa/Cairo' %}selected{% endif %}>Africa/Cairo (EET)</option>
            <option value="Africa/Johannesburg" {% if person and person.timezone == 'Africa/Johannesburg' %}selected{% endif %}>Africa/Johannesburg (SAST)</option>
            <option value="Africa/Lagos" {% if person and person.timezone == 'Africa/Lagos' %}selected{% endif %}>Africa/Lagos (WAT)</option>
            <option value="Asia/Jerusalem" {% if person and person.timezone == 'Asia/Jerusalem' %}selected{% endif %}>Asia/Jerusalem (IST/IDT)</option>
            <option value="Asia/Riyadh" {% if person and person.timezone == 'Asia/Riyadh' %}selected{% endif %}>Asia/Riyadh (AST)</option>
            <option value="Asia/Tehran" {% if person and person.timezone == 'Asia/Tehran' %}selected{% endif %}>Asia/Tehran (IRST/IRDT)</option>
          </optgroup>
          <optgroup label="UTC">
            <option value="UTC" {% if person and person.timezone == 'UTC' %}selected{% endif %}>UTC</option>
          </optgroup>
        </select>
      </div>
    </div>
    <div id="utc-offset-display" class="form-hint" style="margin-top:-0.5rem;margin-bottom:0.5rem"></div>

    <div class="form-group">
      <label for="birthplace">Birthplace *</label>
      <input type="text" id="birthplace" name="birthplace" required
        value="{{ person.birthplace if person else '' }}"
        placeholder="Start typing a city name..."
        autocomplete="off">
      <div id="birthplace-results" class="autocomplete-dropdown" style="display:none"></div>
      <div id="birthplace-status" class="form-hint"></div>
    </div>

    <div class="form-row">
      <div class="form-group">
        <label for="latitude">Latitude *</label>
        <input type="number" id="latitude" name="latitude" step="any" required
          value="{{ person.latitude if person else '' }}"
          placeholder="47.07">
      </div>
      <div class="form-group">
        <label for="longitude">Longitude *</label>
        <input type="number" id="longitude" name="longitude" step="any" required
          value="{{ person.longitude if person else '' }}"
          placeholder="15.42">
      </div>
      <div class="form-group">
        <label for="elevation">Elevation (m)</label>
        <input type="number" id="elevation" name="elevation" step="any"
          value="{{ person.elevation if person else '0' }}">
      </div>
    </div>
    <div class="form-row">
      <div class="form-group">
        <label for="birth_time_known">Birth Time Known?</label>
        <select id="birth_time_known" name="birth_time_known">
          <option value="true" {% if not person or person.birth_time_known %}selected{% endif %}>Yes, accurate</option>
          <option value="false" {% if person and not person.birth_time_known %}selected{% endif %}>Unknown / approximate</option>
        </select>
      </div>
    </div>
  </div>

  <div class="card">
    <h2>Notes</h2>
    <div class="form-group">
      <textarea id="notes" name="notes"
        placeholder="Freeform notes about this person..."
      >{{ person.notes if person else '' }}</textarea>
    </div>
  </div>

  <div class="form-actions">
    <button type="submit" class="btn btn-primary">
      {% if action == 'add' %}Add Person{% else %}Save Changes{% endif %}
    </button>
    {% if action == 'edit' %}
    <a href="/dashboard/persons/{{ person.id }}" class="btn btn-ghost">Cancel</a>
    {% else %}
    <a href="/dashboard/persons" class="btn btn-ghost">Cancel</a>
    {% endif %}
  </div>
</form>
{% endblock %}