{% extends "base.html" %}
{% block title %}{{ _('Conversion Details') }} – OnlineConvert{% endblock %}
{% block content %}
<div class="max-w-2xl mx-auto px-4 py-10">
    <div class="mb-6">
        <a href="{{ full_url('/dashboard') }}" class="inline-flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 hover:text-primary dark:hover:text-primary-light transition-all" data-testid="link-back-dashboard">
            <i class="fa fa-arrow-left"></i> {{ _('Back to Dashboard') }}
        </a>
    </div>

    <div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-6">
        <div class="flex items-center gap-4 mb-6">
            <div class="w-12 h-12 rounded-xl bg-blue-50 dark:bg-blue-900/30 flex items-center justify-center flex-shrink-0">
                <i class="fa fa-file-alt text-blue-500 text-xl"></i>
            </div>
            <div>
                <h1 class="text-xl font-bold text-gray-900 dark:text-white" data-testid="heading-conv-detail">{{ _('Conversion Details') }}</h1>
                <div class="text-sm text-gray-500 dark:text-gray-400 mt-0.5" data-testid="text-conv-id">{{ _('ID #%(id)s', id=conv.id) }}</div>
            </div>
        </div>

        <dl class="space-y-4">
            <div class="flex flex-col sm:flex-row sm:items-center border-b border-gray-100 dark:border-gray-800 pb-4">
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 w-40">{{ _('File Name') }}</dt>
                <dd class="mt-1 sm:mt-0 text-sm text-gray-900 dark:text-white font-medium" data-testid="text-detail-filename">{{ conv.file_name or '–' }}</dd>
            </div>
            <div class="flex flex-col sm:flex-row sm:items-center border-b border-gray-100 dark:border-gray-800 pb-4">
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 w-40">{{ _('Conversion') }}</dt>
                <dd class="mt-1 sm:mt-0 text-sm text-gray-900 dark:text-white" data-testid="text-detail-formats">
                    <span class="inline-block px-2 py-0.5 rounded bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 text-xs font-medium uppercase">{{ conv.input_format or '?' }}</span>
                    <i class="fa fa-arrow-right mx-2 text-gray-400"></i>
                    <span class="inline-block px-2 py-0.5 rounded bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 text-xs font-medium uppercase">{{ conv.output_format or '?' }}</span>
                </dd>
            </div>
            <div class="flex flex-col sm:flex-row sm:items-center border-b border-gray-100 dark:border-gray-800 pb-4">
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 w-40">{{ _('Status') }}</dt>
                <dd class="mt-1 sm:mt-0">
                    <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold
                        {% if conv.status == 'finished' %}bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400
                        {% elif conv.status == 'pending' or conv.status == 'queued' %}bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400
                        {% elif conv.status == 'expired' %}bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400
                        {% elif conv.status == 'cancelled' %}bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400
                        {% elif conv.status == 'deleted' %}bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400
                        {% else %}bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400{% endif %}"
                        data-testid="text-detail-status">{{ conv.status }}</span>
                </dd>
            </div>
            <div class="flex flex-col sm:flex-row sm:items-center border-b border-gray-100 dark:border-gray-800 pb-4">
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 w-40">{{ _('Job ID') }}</dt>
                <dd class="mt-1 sm:mt-0 text-xs font-mono text-gray-600 dark:text-gray-400 break-all" data-testid="text-detail-jobid">{{ conv.job_id or '–' }}</dd>
            </div>
            <div class="flex flex-col sm:flex-row sm:items-center border-b border-gray-100 dark:border-gray-800 pb-4">
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 w-40">{{ _('Created') }}</dt>
                <dd class="mt-1 sm:mt-0 text-sm text-gray-700 dark:text-gray-300" data-testid="text-detail-created">{{ conv.created_at[:16] if conv.created_at else '–' }}</dd>
            </div>
            {% if conv.completed_at %}
            <div class="flex flex-col sm:flex-row sm:items-center border-b border-gray-100 dark:border-gray-800 pb-4">
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 w-40">{{ _('Completed') }}</dt>
                <dd class="mt-1 sm:mt-0 text-sm text-gray-700 dark:text-gray-300" data-testid="text-detail-completed">{{ conv.completed_at[:16] }}</dd>
            </div>
            {% endif %}
        </dl>

        <div class="mt-6 flex flex-wrap gap-3">
            {% if conv.output_path and conv.status == 'finished' %}
            <a href="{{ full_url('/dashboard/download/' ~ conv.id) }}" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-green-600 hover:bg-green-700 text-white font-semibold text-sm transition-all" data-testid="btn-download-file">
                <i class="fa fa-download"></i> {{ _('Download File') }}
            </a>
            {% endif %}
            {% if conv.job_id %}
            <a href="{{ full_url('/output/' ~ conv.job_id) }}" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 font-medium text-sm hover:bg-gray-100 dark:hover:bg-gray-800 transition-all" data-testid="btn-view-output">
                <i class="fa fa-external-link-alt"></i> {{ _('View Output Page') }}
            </a>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}