{# This template is loaded via AJAX into the detail modal - no layout extended #}
<div class="space-y-4">
    {# Title #}
    <div>
        <h4 class="text-lg font-bold text-gray-900 leading-snug">{{ item.title }}</h4>
        <div class="flex items-center gap-3 mt-2 text-xs text-gray-500">
            <span><i class="fas fa-rss mr-1"></i> {{ item.agencySlug|upper }}</span>
            <span><i class="fas fa-fingerprint mr-1"></i> {{ item.externalId }}</span>
            <span><i class="fas fa-clock mr-1"></i> {{ item.receivedAt|date('d.m.Y H:i') }}</span>
            {% if item.status == 'pending' %}
                <span class="inline-flex items-center rounded-full bg-yellow-50 px-2 py-0.5 text-xs font-medium text-yellow-700">Bekliyor</span>
            {% elseif item.status == 'imported' %}
                <span class="inline-flex items-center rounded-full bg-green-50 px-2 py-0.5 text-xs font-medium text-green-700">Import Edildi</span>
            {% elseif item.status == 'skipped' %}
                <span class="inline-flex items-center rounded-full bg-gray-50 px-2 py-0.5 text-xs font-medium text-gray-600">Atlandi</span>
            {% endif %}
        </div>
    </div>

    {# Category #}
    {% if item.category %}
        <div>
            <p class="text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Ajans Kategorisi</p>
            <span class="inline-flex items-center rounded-full bg-blue-50 px-2.5 py-0.5 text-xs font-medium text-blue-700">
                {{ item.category }}
            </span>
        </div>
    {% endif %}

    {# Summary #}
    {% if item.summary %}
        <div>
            <p class="text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Ozet</p>
            <p class="text-sm text-gray-700 leading-relaxed bg-gray-50 rounded-lg p-3">
                {{ item.summary|striptags }}
            </p>
        </div>
    {% endif %}

    {# Content #}
    {% if item.content %}
        <div>
            <p class="text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Icerik</p>
            <div class="text-sm text-gray-700 leading-relaxed bg-gray-50 rounded-lg p-3 max-h-60 overflow-y-auto prose prose-sm">
                {{ item.content|raw }}
            </div>
        </div>
    {% endif %}

    {# Images #}
    {% if item.images and item.images|length > 0 %}
        <div>
            <p class="text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Gorseller ({{ item.images|length }})</p>
            <div class="grid grid-cols-3 gap-2">
                {% for image in item.images %}
                    <div class="aspect-video rounded-lg overflow-hidden bg-gray-100">
                        <img src="{{ image }}" alt="Gorsel {{ loop.index }}" class="w-full h-full object-cover" onerror="this.parentNode.innerHTML='<div class=\'flex items-center justify-center h-full text-gray-400\'><i class=\'fas fa-image\'></i></div>'">
                    </div>
                {% endfor %}
            </div>
        </div>
    {% endif %}

    {# Actions #}
    {% if item.status == 'pending' %}
        <div class="flex items-center gap-3 pt-4 border-t border-gray-100">
            <form method="post" action="{{ path('admin_agency_item_import', {id: item.id}) }}" class="flex-1">
                <input type="hidden" name="_token" value="{{ csrf_token('import_item_' ~ item.id) }}">
                <button type="submit"
                        class="w-full inline-flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium rounded-lg bg-green-600 text-white hover:bg-green-700 transition-colors"
                        onclick="return confirm('Bu haberi import etmek istediginize emin misiniz?')">
                    <i class="fas fa-file-import"></i> Import Et
                </button>
            </form>
            <form method="post" action="{{ path('admin_agency_item_skip', {id: item.id}) }}">
                <input type="hidden" name="_token" value="{{ csrf_token('skip_item_' ~ item.id) }}">
                <button type="submit"
                        class="inline-flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors">
                    <i class="fas fa-forward"></i> Atla
                </button>
            </form>
        </div>
    {% endif %}
</div>
