{% extends "base.html" %}

{% block content %}
  <section class="intro">
    <h2>Draft Mastodon post</h2>
    <p>Review alt text, edit your caption, and ask ChatGPT for phrasing help before posting.</p>
  </section>

  {% if not mastodon_ready %}
    <div class="warning">Mastodon access token missing. You can refine content, but posting is disabled.</div>
  {% endif %}

  {% if error_message %}
    <div class="error">{{ error_message }}</div>
  {% endif %}

  <form method="post" class="compose-form">
    {% if latest_status %}
      <section class="latest-status">
        <h3>Most recent Mastodon post</h3>
        <input type="hidden" name="latest_status_id" value="{{ latest_status.id }}">
        {% if latest_status.created_display %}
          <p class="date">Posted {{ latest_status.created_display }}</p>
        {% endif %}
        <div class="status-content">{{ latest_status.content|safe }}</div>
        <label class="reply-checkbox">
          <input type="hidden" name="reply_to_latest" value="0">
          <input type="checkbox" name="reply_to_latest" value="1" {% if reply_to_latest %}checked{% endif %} {% if not mastodon_ready %}disabled{% endif %}>
          Reply to this post to continue the thread
        </label>
      </section>
    {% elif latest_status_error %}
      <div class="warning">{{ latest_status_error }}</div>
    {% endif %}
    <div class="asset-list">
      {% for asset in assets %}
        <article class="compose-asset" data-asset-id="{{ asset.id }}">
          <input type="hidden" name="asset_ids" value="{{ asset.id }}">
          <div class="order-controls">
            <span class="order-badge">Photo {{ loop.index }}</span>
            <div class="move-buttons">
              <button type="button" data-move="up" aria-label="Move photo up">↑</button>
              <button type="button" data-move="down" aria-label="Move photo down">↓</button>
            </div>
          </div>
          <div class="image">
            <img src="{{ asset.preview_url }}" alt="{{ asset.file_name }}">
          </div>
          <div class="fields">
            <h3>{{ asset.file_name }}</h3>
            {% if asset.captured_display %}
              <p class="date">{{ asset.captured_display }}</p>
            {% endif %}
            <label for="alt_text_{{ asset.id }}">Alt text</label>
            <textarea id="alt_text_{{ asset.id }}" name="alt_text_{{ asset.id }}" rows="4">{{ asset.alt_text }}</textarea>
          </div>
        </article>
      {% endfor %}
    </div>

    <div class="post-text">
      <label for="post_text">Mastodon post text</label>
      <textarea id="post_text" name="post_text" rows="6" placeholder="Compose your post here.">{{ post_text }}</textarea>
    </div>

    <div class="post-instructions">
      <label for="post_instructions">Instructions for ChatGPT (optional)</label>
      <textarea id="post_instructions" name="post_instructions" rows="3" placeholder="Mention tone, audience, hashtags, etc.">{{ instructions }}</textarea>
    </div>

    <div class="compose-actions">
      <button type="submit" name="action" value="refine">Improve text with ChatGPT</button>
      <button type="submit" name="action" value="post" {% if not mastodon_ready %}disabled{% endif %}>Post to Mastodon</button>
    </div>
  </form>
{% endblock %}