{% extends 'base.html.twig' %}
{% import 'macro.html.twig' as macro %}

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

{% block page_title %}
    {% include 'partials/_task-title.html.twig' %}
{% endblock %}

{% block page_content %}
<div class="row">
    <div class="col mb-3">
        <div class="btn-toolbar" role="toolbar">
            <div class="btn-group me-2">
                <a href="{{ path('app_project_show', {'slug': project.slug}) }}" class="btn btn-secondary" title="Revenir au projet">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house" viewBox="0 0 16 16">
                        <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293zM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5z"/>
                    </svg>
                    Projet
                </a>
            </div>
                {% if is_granted('IS_AUTHENTICATED_FULLY') %}
                {% if app.user is same as(task.createdBy) %}
            <div class="btn-group me-2">
                <a href="{{ path('app_task_update', {'slug': task.slug}) }}" class="btn btn-secondary" title="Modifier la tâche">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">
                        <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325"/>
                    </svg>
                    Modifier
                </a>
                <a href="{{ path('app_task_remove', {'slug': task.slug}) }}" target="_blank" class="btn btn-secondary" title="Supprimer la tâche">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                        <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/>
                        <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/>
                    </svg>
                    Supprimer
                </a>
            </div>
                {% endif %}
            <div class="btn-group me-2">
                {% for transition in workflow_transitions(task) %}
                {% if not workflow_metadata(task, 'locking', task.status) or app.user is same as(task.lockedBy) %}
                <a href="{{ path(workflow_metadata(task, 'route', transition), {'slug': task.slug}) }}" class="btn btn-secondary" title="{{ workflow_metadata(task, 'title', transition) }}">
                    {% if transition.name == 'start' %}
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-play-fill" viewBox="0 0 16 16">
                        <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393"/>
                    </svg>
                    {% elseif transition.name == 'finish' %}
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-stop-fill" viewBox="0 0 16 16">
                        <path d="M5 3.5h6A1.5 1.5 0 0 1 12.5 5v6a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 11V5A1.5 1.5 0 0 1 5 3.5"/>
                    </svg>
                    {% elseif transition.name == 'cancel' %}
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-skip-backward-fill" viewBox="0 0 16 16">
                        <path d="M.5 3.5A.5.5 0 0 0 0 4v8a.5.5 0 0 0 1 0V8.753l6.267 3.636c.54.313 1.233-.066 1.233-.697v-2.94l6.267 3.636c.54.314 1.233-.065 1.233-.696V4.308c0-.63-.693-1.01-1.233-.696L8.5 7.248v-2.94c0-.63-.692-1.01-1.233-.696L1 7.248V4a.5.5 0 0 0-.5-.5"/>
                    </svg>
                    {% elseif transition.name == 'reset' %}
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-skip-backward-fill" viewBox="0 0 16 16">
                        <path d="M.5 3.5A.5.5 0 0 0 0 4v8a.5.5 0 0 0 1 0V8.753l6.267 3.636c.54.313 1.233-.066 1.233-.697v-2.94l6.267 3.636c.54.314 1.233-.065 1.233-.696V4.308c0-.63-.693-1.01-1.233-.696L8.5 7.248v-2.94c0-.63-.692-1.01-1.233-.696L1 7.248V4a.5.5 0 0 0-.5-.5"/>
                    </svg>
                    {% endif %}
                    {{ workflow_metadata(task, 'short', transition) }}
                </a>
                {% endif %}
                {% endfor %}
            </div>
            <div class="btn-group me-2">
                {% if workflow_metadata(task, 'locking', task.status) and app.user is same as(task.lockedBy) %}
                <div class="btn-group">
                    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" title="Télécharger la tâche">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16">
                            <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5"/>
                            <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z"/>
                        </svg>
                        Télécharger
                    </button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="{{ path('app_task_geojson', {'slug': task.slug}) }}">.geojson</a></li>
                        <li><a class="dropdown-item" href="{{ path('app_task_gpx', {'slug': task.slug}) }}">.gpx</a></li>
                    </ul>
                </div>
                <button
                    class="btn btn-secondary"
                    type="button"
                    data-controller="josm"
                    data-action="click->josm#remoteControl"
                    data-josm-commands-value="{{ josmCommands|escape('html_attr') }}"
                    title="Télécommande JOSM"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-broadcast" viewBox="0 0 16 16">
                        <path d="M3.05 3.05a7 7 0 0 0 0 9.9.5.5 0 0 1-.707.707 8 8 0 0 1 0-11.314.5.5 0 0 1 .707.707m2.122 2.122a4 4 0 0 0 0 5.656.5.5 0 1 1-.708.708 5 5 0 0 1 0-7.072.5.5 0 0 1 .708.708m5.656-.708a.5.5 0 0 1 .708 0 5 5 0 0 1 0 7.072.5.5 0 1 1-.708-.708 4 4 0 0 0 0-5.656.5.5 0 0 1 0-.708m2.122-2.12a.5.5 0 0 1 .707 0 8 8 0 0 1 0 11.313.5.5 0 0 1-.707-.707 7 7 0 0 0 0-9.9.5.5 0 0 1 0-.707zM10 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0"/>
                    </svg>
                    JOSM
                </button>
                {% endif %}
                {% endif %}
            </div>
            <div class="btn-group me-2">
                {% if randomTask %}
                <a href="{{ path('app_task_show', {'slug': randomTask.slug}) }}" class="btn btn-secondary" title="Piocher une tâche">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-shuffle" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M0 3.5A.5.5 0 0 1 .5 3H1c2.202 0 3.827 1.24 4.874 2.418.49.552.865 1.102 1.126 1.532.26-.43.636-.98 1.126-1.532C9.173 4.24 10.798 3 13 3v1c-1.798 0-3.173 1.01-4.126 2.082A9.6 9.6 0 0 0 7.556 8a9.6 9.6 0 0 0 1.317 1.918C9.828 10.99 11.204 12 13 12v1c-2.202 0-3.827-1.24-4.874-2.418A10.6 10.6 0 0 1 7 9.05c-.26.43-.636.98-1.126 1.532C4.827 11.76 3.202 13 1 13H.5a.5.5 0 0 1 0-1H1c1.798 0 3.173-1.01 4.126-2.082A9.6 9.6 0 0 0 6.444 8a9.6 9.6 0 0 0-1.317-1.918C4.172 5.01 2.796 4 1 4H.5a.5.5 0 0 1-.5-.5"/>
                        <path d="M13 5.466V1.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384l-2.36 1.966a.25.25 0 0 1-.41-.192m0 9v-3.932a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384l-2.36 1.966a.25.25 0 0 1-.41-.192"/>
                    </svg>
                    Piocher
                </a>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col mb-3">
        <p class="text-muted">
            {% include 'partials/_task-metadata.html.twig' %}
            {% include 'partials/_task-locking.html.twig' %}
        </p>
    </div>
</div>

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

{% if task.status == 'doing' %}
<div class="row">
    <div class="col mb-3">
        <table class="table table-bordered table-sm">
            <tbody>
                <tr>
                    <th scope="row">Commentaire</th>
                    <td>
                        {{ macro.clipboard(sourceGenerator.generate(task)) }}
                    </td>
                </tr>
                <tr>
                    <th scope="row">Source</th>
                    <td>
                        {{ macro.clipboard(project.source) }}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
{% endif %}

{% if task.status == 'done' and task.changesetsResult is not empty %}
<div class="row">
    <div class="col mb-3">
        <div class="accordion" id="changsetsAccordion">
            {% set changesets = task.changesetsResult|json_decode %}
            {% for changeset in changesets %}
            {% set collapseId = 'collapse' ~ loop.index %}
            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="{{ '#' ~ collapseId }}" aria-expanded="false" aria-controls="{{ collapseId }}">
                        {{ 'Groupe de modifications ' ~ changeset.id }}
                    </button>
                </h2>
                <div id="{{ collapseId }}" class="accordion-collapse collapse" data-bs-parent="#changesetsAccordion">
                    <div class="accordion-body">
                        <p> Voir sur <a href="{{ 'https://www.openstreetmap.org/changeset/' ~ changeset.id }}" target="_blank">OSM</a> ou <a href="{{ 'https://osmcha.org/changesets/' ~ changeset.id }}" target="_blank">OSMCha</a></p>
                        <table class="table table-bordered table-sm">
                            <tbody>
                                {% for key, value in changeset %}
                                <tr>
                                    <th scope="row">{{ key }}</th>
                                    <td>{{ value }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endif %}

<h2 class="mb-3">Carte</h2>
<div class="row">
    <div class="col mb-3">
        {{ macro.map(task, task.project.overpassResult) }}
    </div>
</div>


{% if task.comments is not empty %}
<details>
    <summary class="mb-3"><h2 class="d-inline">Commentaires <span class="badge text-bg-secondary">{{ task.comments|length }}</span></h2></summary>
{% endif %}
{% if task.comments is not empty %}
<div class="row">
    <div class="col mb-3">
        {% for comment in task.comments %}
        <blockquote class="blockquote">
            {{ comment.content|markdown_to_html }}
        </blockquote>
        <figcaption class="blockquote-footer">
            {% include 'partials/_comment-metadata.html.twig' %}
        </figcaption>
        {% endfor %}
    </div>
</div>
{% endif %}
{% if task.comments is not empty %}
</details>
{% endif %}
{% if is_granted('IS_AUTHENTICATED_FULLY') %}
<div class="row">
    <div class="col mb-3">
        {{ form(commentForm) }}
    </div>
</div>
{% endif %}
{% endblock %}