{% extends "base.html" %}

{% block content %}
  {% if not asset %}
    <div class="error">{{ error_message }}</div>
  {% else %}
    <section class="asset-detail">
      <div class="image">
        <img src="{{ url_for('main.asset_proxy', asset_id=asset.id, variant='preview') }}" alt="{{ asset.file_name }}">
      </div>
      <div class="details">
        <h2>{{ asset.file_name }}</h2>
        {% if asset.captured_display %}
          <p class="date">Captured: {{ asset.captured_display }}</p>
        {% endif %}
        {% if alt_text %}
          <div class="alt-text-block">
            <h3>Current alt text</h3>
            <p>{{ alt_text }}</p>
          </div>
        {% endif %}
        {% if asset.location or (asset.latitude and asset.longitude) %}
          <div class="location-block">
            <h3>Location</h3>
            {% if asset.location %}
              <p>{{ asset.location }}</p>
            {% endif %}
            {% if asset.latitude and asset.longitude %}
              <p class="coords">{{ "%.5f"|format(asset.latitude) }}, {{ "%.5f"|format(asset.longitude) }}</p>
            {% endif %}
          </div>
        {% endif %}
        {% if error_message %}
          <div class="error">{{ error_message }}</div>
        {% endif %}
        <form method="post" class="notes-form">
          <label for="notes">Optional notes for the model</label>
          <textarea id="notes" name="notes" rows="4" placeholder="Mention any extra context you want included.">{{ notes }}</textarea>
          <div class="actions">
            <button type="submit">Generate alt text</button>
          </div>
        </form>
        <p class="links">
          <a href="{{ url_for('main.asset_proxy', asset_id=asset.id, variant='original') }}"
             target="_blank" rel="noopener">Download original</a>
          |
          <a href="{{ asset.web_url }}" target="_blank" rel="noopener">View on Immich</a>
        </p>
      </div>
    </section>
  {% endif %}
{% endblock %}