{% extends 'admin/base.html' %}

{% block title %}{{ t('submissions.detail_title') }}{% endblock %}

{% block content %}
<div class="container-md">
    <div class="page-header--with-action">
        <div class="page-header__content">
            <h2>📋 {{ t('submissions.detail_title') }} #{{ submission.id }}</h2>
        </div>
        <a href="{{ url_for('admin_forms_submissions', form_id=form.id) }}" class="btn btn-secondary">← {{ t('submissions.back_to_list') }}</a>
    </div>

    <!-- Submission data -->
    <div class="form-section">
        <h3>📝 {{ t('submissions.data') }}</h3>
        {% set data = submission.get_data() %}
        {% set fields = form.get_fields() %}
        {% for field in fields %}
        <div class="sd-row">
            <div class="sd-row__label">{{ field.label }}</div>
            <div class="sd-row__value">
                {% set val = data.get(field.name, '—') %}
                {% if val is iterable and val is not string %}
                    {{ val|join(', ') }}
                {% elif field.type == 'rating' and val %}
                    {% for i in range(val|int) %}⭐{% endfor %} ({{ val }}/{{ field.max_rating|default(5) }})
                {% elif field.type == 'consent' %}
                    {{ '✅ ' + t('submissions.agreed') if val in ['true', 'on', '1', 'yes', true] else '❌ ' + t('submissions.not_agreed') }}
                {% else %}
                    {{ val }}
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- Metadata -->
    <div class="form-section">
        <h3>ℹ️ {{ t('submissions.metadata') }}</h3>
        <div class="sd-meta">
            <span>{{ t('submissions.submitted_at') }}: <strong>{{ submission.created_at|format_datetime }}</strong></span>
            <span>{{ t('submissions.ip') }}: <strong>{{ submission.ip_address or '—' }}</strong></span>
            <span>{{ t('submissions.status') }}: 
                <form method="POST" action="{{ url_for('admin_forms_submission_status', sub_id=submission.id) }}" class="sd-status-form">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <input type="hidden" name="return_to" value="{{ request.args.get('return_to') or request.referrer or '' }}">
                    <select name="status">
                        <option value="new" {{ 'selected' if submission.status == 'new' }}>{{ t('submissions.new') }}</option>
                        <option value="read" {{ 'selected' if submission.status == 'read' }}>{{ t('submissions.read') }}</option>
                        <option value="archived" {{ 'selected' if submission.status == 'archived' }}>{{ t('submissions.archived') }}</option>
                        <option value="spam" {{ 'selected' if submission.status == 'spam' }}>{{ t('submissions.spam') }}</option>
                    </select>
                    <button type="submit" class="btn btn-primary btn-sm">{{ t('common.save') }}</button>
                </form>
            </span>
        </div>
        {% if submission.email_confirmed is not none %}
        <div class="sd-row mt-2">
            <div class="sd-row__label">{{ t('submissions.email_status') }}</div>
            <div class="sd-row__value">
                {% if submission.email_confirmed %}
                    <span class="badge-confirmed">✅ {{ t('submissions.email_confirmed') }}</span>
                    {% if submission.confirmed_at %}
                        <span class="text-sm text-muted ml-1">{{ submission.confirmed_at|format_datetime }}</span>
                    {% endif %}
                {% else %}
                    <span class="badge-pending">⏳ {{ t('submissions.email_pending') }}</span>
                {% endif %}
            </div>
        </div>
        {% endif %}
        {% if submission.user_agent %}
        <div class="sd-row mt-2">
            <div class="sd-row__label">{{ t('submissions.user_agent') }}</div>
            <div class="sd-row__value text-xs text-muted">{{ submission.user_agent|truncate(120) }}</div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}
