{% extends 'base.html.twig' %}

{% block breadcrumb %}
<li class="breadcrumb-item"><a href="{{ path('app_project') }}">Projets</a></li>
<li class="breadcrumb-item"><a href="{{ path('app_project_show', {'projectSlug': project.slug}) }}">Projet {{ project.name }}</a></li>
{% endblock %}

{% block page_title %}
    {{ project.name }}
    {% for tag in project.tags %}
    <span class="badge text-bg-info ms-2">{{ tag.name }}</span>
    {% endfor %}
{% endblock %}

{% block page_content %}
<div class="row">
    <div class="col mb-3">
        <a href="{{ path('app_project') }}" class="btn btn-primary">Revenir aux projets</a>
        <a href="{{ path('app_project_update', {'projectSlug': project.slug}) }}" class="btn btn-primary">Modifier le projet</a>
        <a href="{{ path('app_project_remove', {'projectSlug': project.slug}) }}" class="btn btn-primary">Supprimer le projet</a>
        <a href="{{ path('app_task_create', {'projectSlug': project.slug}) }}" class="btn btn-primary">Créer une tâche</a>
    </div>
</div>

{% if project.description is not empty %}
<div class="row">
    <div class="col mb-3 lead">{{ project.description|markdown_to_html }}</div>
</div>
{% endif %}

<h2 class="mb-3">Carte</h2>
<div class="row">
    <div class="col mb-3">
        <div id="map" class="img-fluid img-thumbnail min-vh-50" data-controller="map" data-map-geojson-value="{{ geoJsonManager.generateGeoJson(project)|json_encode }}"></div>
    </div>
</div>

{% if project.tasks is not empty %}
<div class="row">
    <div class="col mb-3">
        <div class="progress-stacked">
            {% set stats = taskLifecycleManager.getProjectStats(project) %}
            {% for place, data in stats %}
            <div class="progress" role="progressbar" data-bs-toggle="tooltip" data-bs-title="{{ data.title }} {{ data.value ~ '/' ~ data.max }}" aria-label="{{ data.title }}" aria-valuenow="{{ data.value }}" aria-valuemin="0" aria-valuemax="{{ data.max }}" style="width:{{ data.percentage ~ '%' }}">
                <div class="progress-bar {{ 'bg-' ~ data.color }}">{{ data.percentage|format_number({fraction_digit: 0}) ~ '%' }}</div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>

<div class="row">
    <div class="col">
        <table class="table table-sm table-hover">
            <thead>
                <tr>
                    <th scope="col">Identifiant</th>
                    <th scope="col">Nom</th>
                    <th scope="col">État</th>
                    <th scope="col">Importance</th>
                    <th scope="col">Urgence</th>
                </tr>
            </thead>
            <tbody>
                {% for task in project.tasks %}
                <tr class="{{ 'table-' ~ workflow_metadata(task, 'color', task.status) }}">
                    <th scope="row">{{ task.id }}</th>
                    <td><a href="{{ path('app_task_show', {'projectSlug': project.slug, 'taskSlug': task.slug}) }}">{{ task.name }}</a></td>
                    <td>{{ workflow_metadata(task, 'title', task.status) }}</td>
                    <td>{{ task.important }}</td>
                    <td>{{ task.urgent }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endif %}
{% endblock %}