{% extends 'admin/layout.html.twig' %}
{% block title %}Projets artistiques{% endblock %}
{% block admin_body %}
<div class="d-flex flex-column flex-md-row justify-content-between gap-3 align-items-md-center mb-4">
  <div><div class="text-uppercase small text-secondary fw-semibold">Administration</div><h1 class="h2 mb-0">Projets artistiques</h1><p class="text-secondary mb-0">Chaque projet dispose de sa tarification, de sa technique, de ses plans et de son identité documentaire.</p></div>
  <a class="btn btn-dark" href="{{ path('admin_artistic_project_new') }}"><i class="bi bi-plus-lg me-1"></i>Nouveau projet</a>
</div>
<div class="row g-4">
{% for project in projects %}
  {% set state=states[project.id] %}
  <div class="col-xl-6">
    <div class="card border-0 shadow-sm h-100">
      <div class="card-body p-4">
        <div class="d-flex justify-content-between gap-3">
          <div class="d-flex align-items-center gap-3">
            <span class="project-color-dot" style="background:{{ project.primaryColor }}"></span>
            <div><h2 class="h4 mb-1">{{ project.name }}</h2><div class="text-secondary small">{{ project.code }} · {{ project.slug }}</div></div>
          </div>
          <span class="badge align-self-start {{ project.status == 'ACTIVE' ? 'text-bg-success' : (project.status == 'DRAFT' ? 'text-bg-warning' : 'text-bg-secondary') }}">{{ project.status == 'ACTIVE' ? 'Actif' : (project.status == 'DRAFT' ? 'Brouillon' : 'Archivé') }}</span>
        </div>
        <div class="progress mt-4" style="height:8px"><div class="progress-bar" style="width:{{ state.percentage }}%;background:{{ project.primaryColor }}"></div></div>
        <div class="d-flex flex-wrap justify-content-between gap-2 align-items-center mt-1">
          <div class="small text-secondary">{{ state.percentage }} % de configuration de référence</div>
          <div class="small"><span class="text-secondary">Facturé HT {{ turnoverYear }} :</span> <strong>{{ turnover[project.id]|number_format(2, ',', ' ') }} €</strong></div>
        </div>
        <div class="row g-2 mt-3">
          {% for key,label in {'prospection':'Prêt pour la prospection','production':'Prêt pour la production','public':'Prêt pour le site public'} %}
          <div class="col-md-4"><div class="rounded border p-2 small {{ attribute(state,key) ? 'bg-success-subtle border-success-subtle' : 'bg-body-tertiary' }}"><i class="bi {{ attribute(state,key) ? 'bi-check-circle-fill text-success' : 'bi-circle text-secondary' }} me-1"></i>{{ label }}</div></div>
          {% endfor %}
        </div>
      </div>
      <div class="card-footer bg-white d-flex gap-2 flex-wrap">
        <a class="btn btn-outline-dark btn-sm" href="{{ path('admin_artistic_project_wizard',{id:project.id,step:'identity'}) }}"><i class="bi bi-sliders me-1"></i>{{ project.status == 'DRAFT' ? 'Reprendre la configuration' : 'Configurer' }}</a>
        {% if project.status == 'DRAFT' and state.prospection %}
        <form method="post" action="{{ path('admin_artistic_project_activate',{id:project.id}) }}"><input type="hidden" name="_token" value="{{ csrf_token('activate-project-'~project.id) }}"><button class="btn btn-success btn-sm"><i class="bi bi-check2-circle me-1"></i>Activer</button></form>
        {% endif %}
        {% if project.status == 'DRAFT' and project.code != 'WTL' %}
        <form method="post" action="{{ path('admin_artistic_project_delete_draft',{id:project.id}) }}" onsubmit="return confirm('Supprimer définitivement ce brouillon et sa configuration initiale ?')"><input type="hidden" name="_token" value="{{ csrf_token('delete-project-'~project.id) }}"><button class="btn btn-outline-danger btn-sm"><i class="bi bi-trash me-1"></i>Supprimer le brouillon</button></form>
        {% endif %}
      </div>
    </div>
  </div>
{% else %}
<div class="col-12"><div class="alert alert-light border">Aucun projet artistique.</div></div>
{% endfor %}
</div>
{% endblock %}