{% load fsm_tags %}

<div class="p-6 submission-card {% if transition_success %}animate-flash-success{% endif %}"
     id="submission-{{ object.id }}"
     data-photo-submission-id="{{ object.id }}">
    <div class="mb-4 submission-header">
        <div>
            <h3 class="flex items-center gap-2 text-lg font-semibold text-gray-900 dark:text-white">
                {% include 'htmx/status_with_actions.html' with object=object user=user show_badge=True badge_only=True %}
                Photo for {{ object.content_object }}
            </h3>
            <div class="mt-1 submission-meta">
                <span class="inline-flex items-center">
                    <i class="mr-1 fas fa-user"></i>
                    {{ object.user.username }}
                </span>
                <span class="mx-2">*</span>
                <span class="inline-flex items-center">
                    <i class="mr-1 fas fa-clock"></i>
                    {{ object.created_at|date:"M d, Y H:i" }}
                </span>
                {% if object.date_taken %}
                <span class="mx-2">*</span>
                <span class="inline-flex items-center">
                    <i class="mr-1 fas fa-calendar"></i>
                    Taken: {{ object.date_taken|date:"M d, Y" }}
                </span>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Photo display -->
    <div class="mt-4 overflow-hidden bg-gray-100 rounded-lg aspect-w-16 aspect-h-9 dark:bg-gray-800">
        <img src="{{ object.photo.url }}"
             alt="{{ object.caption|default:'Submitted photo' }}"
             class="object-contain w-full h-full">
    </div>

    {% if object.caption %}
    <div class="p-4 mt-2 rounded-lg bg-gray-50 dark:bg-gray-700/50">
        <div class="text-sm font-medium text-gray-700 dark:text-gray-300">Caption:</div>
        <div class="mt-1 text-gray-600 dark:text-gray-400">{{ object.caption }}</div>
    </div>
    {% endif %}

    {% if object.notes %}
    <div class="p-4 mt-4 border rounded-lg bg-blue-50 dark:bg-blue-900/30 border-blue-200/50 dark:border-blue-700/50">
        <div class="text-sm font-medium text-blue-900 dark:text-blue-300">Review Notes:</div>
        <div class="mt-1.5 text-blue-800 dark:text-blue-200">{{ object.notes }}</div>
    </div>
    {% endif %}

    <!-- FSM Actions -->
    {% if object.status == 'PENDING' or object.status == 'ESCALATED' and user.role in 'ADMIN','SUPERUSER' %}
    <div class="mt-4 review-notes" x-data="{ showNotes: false }">
        <textarea x-show="showNotes"
                  name="notes"
                  class="w-full p-3 border border-gray-300 rounded-lg resize-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                  placeholder="Add review notes (optional)"
                  rows="3"></textarea>

        <div class="flex items-center justify-end gap-3 mt-4 action-buttons">
            <button class="px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
                    @click="showNotes = !showNotes">
                <i class="mr-2 fas fa-comment-alt"></i>
                Add Notes
            </button>

            <!-- History Button -->
            <button type="button"
                    class="px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
                    hx-get="{% url 'moderation:moderation-reports-all-history' %}?model_type=photosubmission&object_id={{ object.id }}"
                    hx-target="#history-detail-body"
                    hx-swap="innerHTML"
                    @click="$dispatch('open-history-modal')">
                <i class="mr-2 fas fa-history"></i>
                History
            </button>

            <!-- FSM-based transition actions -->
            {% include 'htmx/status_with_actions.html' with object=object user=user target_id="submission-"|add:object.id|stringformat:"s" show_badge=False %}
        </div>
    </div>
    {% endif %}
</div>