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

{% block breadcrumb %}
<li class="breadcrumb-item"><a href="{{ path('app_project') }}">{{ 'breadcrumb.projects'|trans }}</a></li>
<li class="breadcrumb-item"><a href="{{ path('app_project_show', {'slug': project.slug}) }}">{{ 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">
        <div class="btn-toolbar" role="toolbar">
            <div class="btn-group me-2">
                <a href="{{ path('app_project') }}" class="btn btn-secondary" title="{{ 'button.back_to_projects'|trans }}" accesskey="P">
                    <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>
                    {{ 'button.projects'|trans }}
                </a>
            </div>
            {% if is_granted('IS_AUTHENTICATED_FULLY') %}
            {% if app.user is same as(project.createdBy) %}
            <div class="btn-group me-2">
                <a href="{{ path('app_project_update', {'slug': project.slug}) }}" class="btn btn-secondary" title="{{ 'button.update_project'|trans }}" accesskey="U">
                    <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>
                    {{ 'button.update'|trans }}
                </a>
                <a href="{{ path('app_project_remove', {'slug': project.slug}) }}" class="btn btn-secondary" title="{{ 'button.remove_project'|trans }}" accesskey="R">
                    <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>
                    {{ 'button.remove'|trans }}
                </a>
            </div>
            {% endif %}
            {% if project.overpassQuery %}
            <div class="btn-group me-2">
                <a href="{{ path('app_project_overpass', {'slug': project.slug}) }}" class="btn btn-secondary" title="{{ 'button.query_overpass'|trans }}" accesskey="O">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2z"/>
                        <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466"/>
                    </svg>
                    {{ 'button.overpass'|trans }}
                </a>
            </div>
            {% endif %}
            <div class="btn-group me-2">
                <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#modal" title="{{ 'button.import_tasks'|trans }}" accesskey="I">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-arrow-down" viewBox="0 0 16 16">
                        <path d="M8.5 6.5a.5.5 0 0 0-1 0v3.793L6.354 9.146a.5.5 0 1 0-.708.708l2 2a.5.5 0 0 0 .708 0l2-2a.5.5 0 0 0-.708-.708L8.5 10.293z"/>
                        <path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2M9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"/>
                    </svg>
                    {{ 'button.import'|trans }}
                </button>
                <a href="{{ path('app_task_csv', {'slug': project.slug}) }}" class="btn btn-secondary" title="{{ 'button.export_tasks'|trans }}" accesskey="E">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-arrow-up" viewBox="0 0 16 16">
                        <path d="M8.5 11.5a.5.5 0 0 1-1 0V7.707L6.354 8.854a.5.5 0 1 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 7.707z"/>
                        <path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2M9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"/>
                    </svg>
                    {{ 'button.export'|trans }}
                </a>
                <a href="{{ path('app_task_create', {'slug': project.slug}) }}" class="btn btn-secondary" title="{{ 'button.create_task'|trans }}" accesskey="C">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16">
                        <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"/>
                    </svg>
                    {{ 'button.create'|trans }}
                </a>
            </div>
            {% endif %}
            {% if randomTask %}
            <div class="btn-group">
                <a href="{{ path('app_task_show', {'slug': randomTask.slug}) }}" class="btn btn-secondary" title="{{ 'button.pick_task'|trans }}" accesskey="?">
                    <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>
                    {{ 'button.pick'|trans }}
                </a>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<div class="row">
    <div class="col mb-3">
        <p class="text-muted">
            {% include 'partials/_project-metadata.html.twig' %}<br/>
            {% if project.hashtags is not empty %}
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-hash" viewBox="0 0 16 16">
                <path d="M8.39 12.648a1 1 0 0 0-.015.18c0 .305.21.508.5.508.266 0 .492-.172.555-.477l.554-2.703h1.204c.421 0 .617-.234.617-.547 0-.312-.188-.53-.617-.53h-.985l.516-2.524h1.265c.43 0 .618-.227.618-.547 0-.313-.188-.524-.618-.524h-1.046l.476-2.304a1 1 0 0 0 .016-.164.51.51 0 0 0-.516-.516.54.54 0 0 0-.539.43l-.523 2.554H7.617l.477-2.304c.008-.04.015-.118.015-.164a.51.51 0 0 0-.523-.516.54.54 0 0 0-.531.43L6.53 5.484H5.414c-.43 0-.617.22-.617.532s.187.539.617.539h.906l-.515 2.523H4.609c-.421 0-.609.219-.609.531s.188.547.61.547h.976l-.516 2.492c-.008.04-.015.125-.015.18 0 .305.21.508.5.508.265 0 .492-.172.554-.477l.555-2.703h2.242zm-1-6.109h2.266l-.515 2.563H6.859l.532-2.563z"/>
            </svg>
            {% for hashtag in project.hashtags|split(' ') %}
            <a href="https://osmcha.org/?filters=%7B%22metadata%22%3A%5B%7B%22label%22%3A%22hashtags%3D%23{{ hashtag }}%22%2C%22value%22%3A%22hashtags%3D%23{{ hashtag }}%22%7D%5D%7D" target="_blank">{{ '#' ~ hashtag }}</a>
            {% endfor %}
            {% endif %}
        </p>
    </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 %}

{% if project.tasks is not empty %}
<h2 class="mb-3">{{ 'title.map'|trans }}</h2>
<div class="row">
    <div class="col mb-3">
        {{ macro.map(project, project.overpassResult ? project.overpassResult : '') }}
    </div>
</div>
{% endif %}

{% if project.tasks is not empty %}
{% set dummy = tasks.setParam('_fragment', 'tasks') %}
<h2 id="tasks" class="mb-3">{{ 'title.tasks'|trans }}</h2>
<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|trans }} {{ data.value ~ '/' ~ data.max }}" aria-label="{{ data.title|trans }}" 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">{{ macro.paginated(tasks, 'column.task.name'|trans, 't.name') }}</th>
                    <th scope="col">{{ macro.paginated(tasks, 'column.task.status'|trans, 't.status') }}</th>
                    <th scope="col">{{ macro.paginated(tasks, 'column.task.important'|trans, 't.important') }}</th>
                    <th scope="col">{{ macro.paginated(tasks, 'column.task.urgent'|trans, 't.urgent') }}</th>
                </tr>
            </thead>
            <tbody>
                {% for task in tasks %}
                <tr class="{{ 'table-' ~ workflow_metadata(task, 'color', task.status) }}">
                    <td><a href="{{ path('app_task_show', {'slug': task.slug}) }}">{{ task.name }}</a></td>
                    <td>{{ workflow_metadata(task, 'title', task.status)|trans }}</td>
                    <td>{{ task.important }}</td>
                    <td>{{ task.urgent }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{{ knp_pagination_render(tasks) }}
{% endif %}

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

{% block modals %}
{{ form_start(csv_form) }}
<div class="modal fade" id="modal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="modalLabel">{{ 'title.import_tasks'|trans }}</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ 'button.close'|trans }}"></button>
      </div>
      <div class="modal-body">
        {{ form_row(csv_form.csv) }}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'button.close'|trans }}</button>
        {{ form_widget(csv_form.submit) }}
      </div>
    </div>
  </div>
</div>
{{ form_end(csv_form) }}
{% endblock %}
