{% extends "base.html" %}
{% block title %}{% if contact %}Edit Contact{% else %}New Contact{% endif %} — ArtNode{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <a href="{{ url_for('contacts.index') }}" style="font-size:0.75rem;color:var(--text-muted);letter-spacing:0.06em;text-transform:uppercase;">&larr; Contacts</a>
    <div class="page-title" style="margin-top:4px;">{% if contact %}Edit Contact{% else %}New Contact{% endif %}</div>
  </div>
  {% if contact %}
  <div class="page-actions">
    <form method="POST" action="{{ url_for('contacts.delete', id=contact.id) }}" onsubmit="return confirm('Remove this contact?')">
      {{ form.hidden_tag() }}
      <button type="submit" class="btn btn-secondary">Remove</button>
    </form>
  </div>
  {% endif %}
</div>

<div class="page-body">
  <form method="POST" action="">
    {{ form.hidden_tag() }}
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2xl);align-items:start;">

      <!-- Left column -->
      <div>
        <div style="background:var(--surface);border:1px solid var(--border);padding:var(--space-xl);margin-bottom:var(--space-lg);">
          <div style="font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-lg);">Identity</div>
          <div class="form-group">{{ form.contact_type.label(class="form-label") }}{{ form.contact_type(class="form-control", id="contactType") }}</div>
          <div id="individualFields">
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);">
              <div class="form-group">{{ form.first_name.label(class="form-label") }}{{ form.first_name(class="form-control") }}</div>
              <div class="form-group">{{ form.last_name.label(class="form-label") }}{{ form.last_name(class="form-control") }}</div>
            </div>
          </div>
          <div id="institutionFields" style="display:none;">
            <div class="form-group">{{ form.organisation.label(class="form-label") }}{{ form.organisation(class="form-control") }}</div>
          </div>
          <div class="form-group">{{ form.email.label(class="form-label") }}{{ form.email(class="form-control") }}</div>
          <div class="form-group">{{ form.phone.label(class="form-label") }}{{ form.phone(class="form-control") }}</div>
        </div>

        <div style="background:var(--surface);border:1px solid var(--border);padding:var(--space-xl);margin-bottom:var(--space-lg);">
          <div style="font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-lg);">Address</div>
          <div class="form-group">{{ form.address.label(class="form-label") }}{{ form.address(class="form-control", rows=2) }}</div>
          <div style="display:grid;grid-template-columns:80px 1fr 80px;gap:var(--space-md);">
            <div class="form-group" style="margin-bottom:0;">{{ form.zip_code.label(class="form-label") }}{{ form.zip_code(class="form-control", placeholder="5200") }}</div>
            <div class="form-group" style="margin-bottom:0;">{{ form.city.label(class="form-label") }}{{ form.city(class="form-control") }}</div>
            <div class="form-group" style="margin-bottom:0;">{{ form.country.label(class="form-label") }}{{ form.country(class="form-control", placeholder="CH") }}</div>
          </div>
        </div>

        <div style="background:var(--surface);border:1px solid var(--border);padding:var(--space-xl);margin-bottom:var(--space-lg);">
          <div style="font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-lg);">Notes</div>
          <div class="form-group">{{ form.notes(class="form-control", rows=4) }}</div>
        </div>
      </div>

      <!-- Right column -->
      <div>
        <div style="background:var(--surface);border:1px solid var(--border);padding:var(--space-xl);margin-bottom:var(--space-lg);">
          <div style="font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-lg);">Artist</div>
          <label style="display:flex;align-items:center;gap:10px;cursor:pointer;font-size:0.88rem;margin-bottom:var(--space-md);">
            {{ form.is_artist(id="isArtist", style="width:16px;height:16px;") }} {{ form.is_artist.label.text }}
          </label>

          <div id="artistFields" style="display:none;">
            <div style="border-top:1px solid var(--border-light);padding-top:var(--space-md);margin-top:var(--space-md);">
              <label style="display:flex;align-items:center;gap:10px;cursor:pointer;font-size:0.88rem;margin-bottom:var(--space-lg);">
                {{ form.is_active_representation(style="width:16px;height:16px;") }} {{ form.is_active_representation.label.text }}
              </label>
              <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);">
                <div class="form-group">{{ form.birth_year.label(class="form-label") }}{{ form.birth_year(class="form-control", placeholder="e.g. 1950") }}</div>
                <div class="form-group">{{ form.death_year.label(class="form-label") }}{{ form.death_year(class="form-control", placeholder="if deceased") }}</div>
              </div>
              <div class="form-group">{{ form.nationality.label(class="form-label") }}{{ form.nationality(class="form-control") }}</div>
              <div class="form-group">{{ form.artist_website.label(class="form-label") }}{{ form.artist_website(class="form-control", placeholder="https://...") }}</div>
              <div class="form-group">
                <label class="form-label">Biography</label>
                {% for lang in ["de","fr","it","en"] %}
                <div style="margin-bottom:var(--space-sm);">
                  <div style="font-size:0.65rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px;">{{ lang|upper }}</div>
                  <textarea name="trans_biography_{{ lang }}" class="form-control" rows="4">{{ (contact.translations or {}).get(lang, {}).get('biography', '') if contact else '' }}</textarea>
                </div>
                {% endfor %}
              </div>

              <!-- Artist photo -->
              <div class="form-group">
                <label class="form-label">Artist Photo</label>
                {% if contact and contact.photo_url %}
                <div style="display:flex;align-items:center;gap:var(--space-lg);margin-bottom:var(--space-md);">
                  <img src="{{ contact.photo_url }}" style="width:80px;height:80px;object-fit:cover;border-radius:2px;">
                  <form method="POST" action="{{ url_for('contacts.delete_photo', id=contact.id) }}"
                        onsubmit="return confirm('Remove photo?')" style="display:inline;">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <button type="submit" class="btn btn-secondary" style="font-size:0.75rem;">Remove</button>
                  </form>
                </div>
                {% endif %}
                {% if contact %}
                <form method="POST" action="{{ url_for('contacts.upload_photo', id=contact.id) }}"
                      enctype="multipart/form-data">
                  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                  <div style="display:flex;align-items:center;gap:var(--space-md);">
                    <input type="file" name="photo" accept=".jpg,.jpeg,.png" class="form-control" style="max-width:300px;">
                    <button type="submit" class="btn btn-secondary" style="font-size:0.75rem;">Upload</button>
                  </div>
                  <p style="font-size:0.72rem;color:var(--text-muted);margin-top:4px;">Square JPG or PNG only · Max 500KB</p>
                </form>
                {% else %}
                <p style="font-size:0.75rem;color:var(--text-muted);">Save the contact first, then upload a photo.</p>
                {% endif %}
              </div>
            </div>
          </div>
        </div>


        <div style="background:var(--surface);border:1px solid var(--border);padding:var(--space-xl);margin-bottom:var(--space-lg);">
          <div style="font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-lg);">Roles</div>
          {% for category, roles in role_categories %}
          <div style="margin-bottom:var(--space-md);">
            <div style="font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px;">{{ category }}</div>
            {% for role_key, role_label in roles %}
            <label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-size:0.85rem;margin-bottom:6px;">
              <input type="checkbox" name="roles" value="{{ role_key }}" style="width:14px;height:14px;"
                     {% if contact and role_key in (contact.roles or []) %}checked{% endif %}>
              {{ role_label }}
            </label>
            {% endfor %}
          </div>
          {% endfor %}
        </div>
        <div style="display:flex;gap:var(--space-md);justify-content:flex-end;">
          <a href="{{ url_for('contacts.index') }}" class="btn btn-secondary">Cancel</a>
          <button type="submit" class="btn btn-primary">{% if contact %}Save Changes{% else %}Add Contact{% endif %}</button>
        </div>
      </div>

    </div>
  </form>
</div>

<script>
const contactType = document.getElementById('contactType');
const isArtist = document.getElementById('isArtist');
const artistFields = document.getElementById('artistFields');
const individualFields = document.getElementById('individualFields');
const institutionFields = document.getElementById('institutionFields');

function toggleType() {
  const isInstitution = contactType.value === 'institution';
  individualFields.style.display = isInstitution ? 'none' : '';
  institutionFields.style.display = isInstitution ? '' : 'none';
}

function toggleArtist() {
  artistFields.style.display = isArtist.checked ? '' : 'none';
}

contactType.addEventListener('change', toggleType);
isArtist.addEventListener('change', toggleArtist);
toggleType();
toggleArtist();

function switchTab(btn, field) {
  // Update tab styles
  document.querySelectorAll(`.trans-tab[data-field="${field}"]`).forEach(b => {
    b.style.fontWeight = '';
    b.style.borderColor = '';
  });
  btn.style.fontWeight = '700';
  btn.style.borderColor = 'var(--text)';
  // Show/hide textareas
  const lang = btn.dataset.lang;
  document.querySelectorAll(`.trans-field[data-field="${field}"]`).forEach(ta => {
    const active = this.dataset ? false : false; // placeholder
  });
}

function switchTab(btn, field) {
  // Update tab styles
  document.querySelectorAll(`.trans-tab[data-field="${field}"]`).forEach(b => {
    b.style.fontWeight = '';
    b.style.borderColor = '';
  });
  btn.style.fontWeight = '700';
  btn.style.borderColor = 'var(--text)';
  // Show/hide textareas
  const lang = btn.dataset.lang;
  document.querySelectorAll(`.trans-field[data-field="${field}"]`).forEach(ta => {
    const active = this.dataset ? false : false; // placeholder
  });
}
</script>
{% endblock %}