{% load fsm_tags %}
<div class="p-6 submission-card" id="submission-{{ submission.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">
                <span class="status-badge 
                    {% if submission.status == 'PENDING' %}status-pending
                    {% elif submission.status == 'APPROVED' %}status-approved
                    {% elif submission.status == 'REJECTED' %}status-rejected
                    {% elif submission.status == 'ESCALATED' %}status-escalated{% endif %}">
                    <i class="mr-1.5 fas fa-{% if submission.status == 'PENDING' %}clock
                        {% elif submission.status == 'APPROVED' %}check
                        {% elif submission.status == 'REJECTED' %}times
                        {% elif submission.status == 'ESCALATED' %}exclamation{% endif %}"></i>
                    {{ submission.get_status_display }}
                </span>
                Photo for {{ submission.content_object }}
            </h3>
            <div class="mt-1 submission-meta">
                <span class="inline-flex items-center">
                    <i class="mr-1 fas fa-user"></i>
                    {{ submission.user.username }}
                </span>
                <span class="mx-2">•</span>
                <span class="inline-flex items-center">
                    <i class="mr-1 fas fa-clock"></i>
                    {{ submission.created_at|date:"M d, Y H:i" }}
                </span>
                {% if submission.date_taken %}
                <span class="mx-2">•</span>
                <span class="inline-flex items-center">
                    <i class="mr-1 fas fa-calendar"></i>
                    Taken: {{ submission.date_taken|date:"M d, Y" }}
                </span>
                {% endif %}
            </div>
        </div>
    </div>

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

    {% if submission.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">{{ submission.caption }}</div>
    </div>
    {% endif %}

    {% if submission.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">{{ submission.notes }}</div>
    </div>
    {% endif %}

    {% if submission.status == 'PENDING' or submission.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>

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