{% extends "base.html" %}
{% block title %}{% if artwork %}Edit {{ artwork.title }}{% else %}Add Artwork{% endif %} — ArtNode{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <a href="{{ url_for('artworks.index') }}" style="font-size:0.75rem;color:var(--text-muted);letter-spacing:0.06em;text-transform:uppercase;">&larr; Artworks</a>
    <div class="page-title" style="margin-top:4px;">{% if artwork %}Edit Artwork{% else %}Add Artwork{% endif %}</div>
  </div>
  {% if artwork %}
  <div class="page-actions">
    <form method="POST" action="{{ url_for('artworks.delete', id=artwork.id) }}" onsubmit="return confirm('Remove this artwork?')">
      {{ 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);">Basic Information</div>
          <div class="form-group">{{ form.title.label(class="form-label") }}{{ form.title(class="form-control", placeholder="Artwork title") }}{% if form.title.errors %}<div style="color:#c0392b;font-size:0.78rem;margin-top:4px;">{{ form.title.errors[0] }}</div>{% endif %}</div>
          <div class="form-group">{{ form.artist_id.label(class="form-label") }}{{ form.artist_id(class="form-control") }}</div>
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);">
            <div class="form-group">{{ form.year_from.label(class="form-label") }}{{ form.year_from(class="form-control", placeholder="e.g. 1953") }}</div>
            <div class="form-group">{{ form.year_to.label(class="form-label") }}{{ form.year_to(class="form-control", placeholder="if range") }}</div>
          </div>
          <div class="form-group">
            <label class="form-label">Medium</label>
            {% for lang in ["de","fr","it","en"] %}
            <div style="margin-bottom:4px;display:flex;align-items:center;gap:8px;">
              <span style="font-size:0.65rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);width:24px;flex-shrink:0;">{{ lang|upper }}</span>
              <input type="text" name="trans_medium_{{ lang }}" class="form-control"
                     placeholder="e.g. Oil on canvas"
                     value="{{ (artwork.translations or {}).get(lang, {}).get('medium', '') if artwork else '' }}">
            </div>
            {% endfor %}
          </div>
          <div class="form-group">{{ form.dimensions.label(class="form-label") }}{{ form.dimensions(class="form-control", rows=2, placeholder="e.g. 100 x 80 cm") }}</div>
          <div class="form-group">
            <label class="form-label">Description</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_description_{{ lang }}" class="form-control" rows="2">{{ (artwork.translations or {}).get(lang, {}).get('description', '') if artwork else '' }}</textarea>
            </div>
            {% endfor %}
          </div>
        </div>

        <!-- Ownership section -->
        <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);">Ownership</div>
          <div class="form-group">{{ form.ownership_type.label(class="form-label") }}{{ form.ownership_type(class="form-control", id="ownershipType") }}</div>

          <!-- Owned fields -->
          <div id="ownedFields">
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);">
              <div class="form-group">{{ form.acquisition_cost.label(class="form-label") }}{{ form.acquisition_cost(class="form-control", placeholder="0.00") }}</div>
              <div class="form-group">{{ form.acquisition_date.label(class="form-label") }}{{ form.acquisition_date(class="form-control") }}</div>
            </div>
            <p style="font-size:0.78rem;color:var(--text-muted);margin-top:-8px;margin-bottom:var(--space-md);">Used to calculate gallery profit on sale.</p>
          </div>

          <!-- Consignment fields -->
          <div id="consignmentFields" style="display:none;">
            <div class="form-group">{{ form.consignor_id.label(class="form-label") }}{{ form.consignor_id(class="form-control") }}</div>
            <div class="form-group">
              {{ form.gallery_split_pct.label(class="form-label") }}
              {{ form.gallery_split_pct(class="form-control", placeholder="50.00") }}
              <p style="font-size:0.78rem;color:var(--text-muted);margin-top:4px;" id="splitPreview"></p>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);">
              <div class="form-group">{{ form.consignment_start.label(class="form-label") }}{{ form.consignment_start(class="form-control") }}</div>
              <div class="form-group">{{ form.consignment_end.label(class="form-label") }}{{ form.consignment_end(class="form-control") }}</div>
            </div>
            <div class="form-group">{{ form.consignment_terms.label(class="form-label") }}{{ form.consignment_terms(class="form-control", rows=3, placeholder="Consignment terms and conditions") }}</div>
          </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);">Classification & Status</div>
          <div class="form-group">{{ form.object_type.label(class="form-label") }}{{ form.object_type(class="form-control") }}</div>
          <div class="form-group">{{ form.status.label(class="form-label") }}{{ form.status(class="form-control") }}</div>
          <div class="form-group">{{ form.inventory_number.label(class="form-label") }}{{ form.inventory_number(class="form-control", placeholder="e.g. 2024-001") }}</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);">Asking Price</div>
          <div style="display:grid;grid-template-columns:1fr 100px;gap:var(--space-md);">
            <div class="form-group">{{ form.price.label(class="form-label") }}{{ form.price(class="form-control", placeholder="0.00") }}</div>
            <div class="form-group">{{ form.currency.label(class="form-label") }}{{ form.currency(class="form-control") }}</div>
          </div>
          <div class="form-group">
            <label style="display:flex;align-items:center;gap:10px;cursor:pointer;font-size:0.85rem;">
              {{ form.show_price(style="width:16px;height:16px;") }}
              {{ form.show_price.label.text }}
            </label>
          </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);">Rights & Attribution</div>
          <div class="form-group">{{ form.rights.label(class="form-label") }}{{ form.rights(class="form-control", placeholder="e.g. Public Domain, CC0") }}</div>
          <div class="form-group">{{ form.credit_line.label(class="form-label") }}{{ form.credit_line(class="form-control", rows=2) }}</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);">Public Display</div>
          <div style="display:flex;flex-direction:column;gap:var(--space-md);">
            <label style="display:flex;align-items:center;gap:10px;cursor:pointer;font-size:0.88rem;">
              {{ form.is_public(style="width:16px;height:16px;") }} {{ form.is_public.label.text }}
            </label>
            <div style="height:1px;background:var(--border-light);margin:8px 0;"></div>
            <label style="display:flex;align-items:center;gap:10px;cursor:pointer;font-size:0.88rem;">
              {{ form.is_carousel(style="width:16px;height:16px;") }} {{ form.is_carousel.label.text }}
            </label>
            <label style="display:flex;align-items:center;gap:10px;cursor:pointer;font-size:0.88rem;">
              {{ form.is_featured(style="width:16px;height:16px;") }} {{ form.is_featured.label.text }}
            </label>
          </div>
        </div>
        <div style="display:flex;gap:var(--space-md);justify-content:flex-end;">
          <a href="{{ url_for('artworks.index') }}" class="btn btn-secondary">Cancel</a>
          <button type="submit" class="btn btn-primary">{% if artwork %}Save Changes{% else %}Add Artwork{% endif %}</button>
        </div>
      </div>

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

<script>
const ownershipSelect = document.getElementById('ownershipType');
const ownedFields = document.getElementById('ownedFields');
const consignmentFields = document.getElementById('consignmentFields');
const splitInput = document.querySelector('[name="gallery_split_pct"]');
const splitPreview = document.getElementById('splitPreview');

function toggleOwnership() {
  const val = ownershipSelect.value;
  ownedFields.style.display = val === 'owned' ? '' : 'none';
  consignmentFields.style.display = val === 'consignment' ? '' : 'none';
  updateSplitPreview();
}

function updateSplitPreview() {
  if (ownershipSelect.value !== 'consignment') return;
  const pct = parseFloat(splitInput.value) || 0;
  splitPreview.textContent = `Gallery: ${pct}% — Consignor: ${(100 - pct).toFixed(0)}%`;
}

ownershipSelect.addEventListener('change', toggleOwnership);
splitInput.addEventListener('input', updateSplitPreview);
toggleOwnership();
</script>
{% block extra_js %}
<script>
function switchTransTab(btn, field) {
  document.querySelectorAll(`.trans-tab[data-field="${field}"]`).forEach(b => {
    b.style.fontWeight = ""; b.style.borderColor = "";
  });
  btn.style.fontWeight = "700"; btn.style.borderColor = "var(--text)";
  const lang = btn.dataset.lang;
  document.querySelectorAll(`.trans-field[data-field="${field}"]`).forEach(ta => {
    const active = this.dataset ? false : false; // placeholder
  });
}
</script>
{% endblock %}
{% endblock %}