{% extends 'layout/app.html.twig' %}

{% block title %}{{ 'home.sourcer.title'|trans }} - {{ 'app.portal'|trans }}{% endblock %}
{% block breadcrumb %}{{ 'home.sourcer.title'|trans }}{% endblock %}

{% block app_content %}
    <h1 class="font-display text-2xl text-pepite-ink">{{ 'home.sourcer.title'|trans }}</h1>
    <p class="mt-1 font-structure text-sm text-pepite-ink/60">{{ 'home.sourcer.intro'|trans }}</p>

    {% if requests is empty %}
        <div class="mt-8 rounded-md border border-dashed border-gray-300 bg-white px-6 py-10 text-center text-sm text-pepite-ink/60">
            {{ 'home.sourcer.empty'|trans }}
        </div>
    {% else %}
        <div class="mt-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
            {% for item in requests %}
                {% set photo = item.mainPhoto %}
                {# Date où la demande a été adressée à CE sourceur — pas celle de l'import, qui est interne. #}
                {% set assignment = item.activeAssignmentFor(sourcer) %}
                <article data-role="request-card" class="flex flex-col rounded-md border border-gray-200 bg-white">
                    <a href="{{ path('app_request_show', { id: item.id }) }}" class="flex h-44 items-center justify-center border-b border-gray-100 bg-white p-2">
                        {% if photo %}
                            <img src="{{ path('app_request_photo', { id: item.id, photoId: photo.id }) }}" alt="{{ 'photos.alt_main'|trans({'%name%': item.title}, 'sourcing_sheet') }}" class="h-full w-full object-contain" loading="lazy">
                        {% else %}
                            <span class="px-4 text-center text-xs text-pepite-ink/40">{{ 'photos.none'|trans({}, 'sourcing_sheet') }}</span>
                        {% endif %}
                    </a>
                    <div class="flex flex-1 flex-col p-4">
                        <p class="font-structure text-xs text-pepite-ink/50">{{ 'request.reference'|trans }} {{ item.externalReference }}</p>
                        <h2 class="mt-0.5 font-structure text-base font-semibold text-pepite-ink">{{ item.title }}</h2>
                        {% if item.need %}<p class="mt-1 text-sm text-pepite-ink/70">{{ item.need }}</p>{% endif %}
                        <div class="mt-auto flex flex-wrap items-center justify-between gap-2 pt-4">
                            {% if assignment and assignment.proposal %}
                                {% include 'proposal/_state.html.twig' with { state: assignment.proposal.state, audience: 'sourcer' } only %}
                            {% else %}
                                <span data-role="state" data-state="none" class="inline-block rounded-full bg-amber-100 px-2.5 py-0.5 font-structure text-xs font-semibold text-amber-900">{{ 'proposal.state.none'|trans }}</span>
                            {% endif %}
                            {% if assignment %}<span class="text-xs text-pepite-ink/50">{{ 'request.received'|trans({'%date%': assignment.assignedAt|date('date_format'|trans({}, 'sourcing_sheet'))}) }}</span>{% endif %}
                        </div>
                    </div>
                </article>
            {% endfor %}
        </div>
    {% endif %}

    {% if archived is not empty %}
        <section data-role="archived" class="mt-10">
            <h2 class="font-display text-lg text-pepite-ink">{{ 'proposal.archived'|trans }}</h2>
            <p class="mt-1 font-structure text-sm text-pepite-ink/60">{{ 'proposal.archived_intro'|trans }}</p>
            <ul class="mt-4 divide-y divide-gray-100 rounded-md border border-gray-200 bg-white">
                {% for item in archived %}
                    {% set past = item.assignmentFor(sourcer) %}
                    <li class="flex flex-wrap items-center justify-between gap-3 px-4 py-3 text-sm">
                        <a href="{{ path('app_request_show', { id: item.id }) }}" class="min-w-0 hover:underline">
                            <span class="font-structure text-xs text-pepite-ink/50">{{ 'request.reference'|trans }} {{ item.externalReference }}</span>
                            <span class="block font-medium text-pepite-ink">{{ item.title }}</span>
                        </a>
                        {% if past and past.proposal %}
                            {% include 'proposal/_state.html.twig' with { state: past.proposal.state, audience: 'sourcer' } only %}
                        {% endif %}
                    </li>
                {% endfor %}
            </ul>
        </section>
    {% endif %}
{% endblock %}