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

{% block title %}{{ action.name }} - PTGE{% endblock %}

{% block body %}
    <main>
        <section class="action-detail">
            <div class="container">
                <div class="tags flex-row">
                    {% for tag in action.tags %}
                        <div class="tag green">{{ tag.name }}</div>
                    {% endfor %}
                    {% if action.priority %}<div class="tag blue-secondary">Action prioritaire</div>{% endif %}
                </div>
                <div class="title">
                    <h1>{{ action.name }}</h1>
                </div>

                {% if action.filename %}
                    <figure>
                        <img src="{{ asset('uploads/action/'~ action.filename) }}" alt="{{ action.altImage }}" class="action-detail__background">
                        <figcaption>{{ action.legendImage }}</figcaption>
                    </figure>
                {% endif %}

                <div class="action-detail__objective">
                    <h2>Objectif</h2>
                    <p>{{ action.objective }}</p>
                </div>

                <div class="action-detail__context">
                    <h2 class="shortstack">Contexte</h2>
                    <p>
                        {{ action.context|nl2br }}
                    </p>
                </div>
                <div class="action-detail__description">
                    <h2 class="shortstack">Description</h2>
                    <p>
                        {{ action.description|nl2br }}
                    </p>
                </div>

                <div class="action-detail__information">
                    <div class="row">
                        {% if action.public %}
                            <div class="col-3">
                                <span class="tag green">Public cible</span>
                                <p>{{ action.public|nl2br }}</p>
                            </div>
                        {% endif %}
                        {% if action.holder %}
                            <div class="col-3">
                                <span class="tag blue">Porteur</span>
                                <p>{{ action.holder|nl2br }}</p>
                            </div>
                        {% endif %}
                        {% if action.partner %}
                            <div class="col-3">
                                <span class="tag green">Partenaires</span>
                                <p>{{ action.partner|nl2br }}</p>
                            </div>
                        {% endif %}
                        {% if action.indicator %}
                            <div class="col-3">
                                <span class="tag blue">Indicateurs</span>
                                <p>{{ action.indicator|nl2br }}</p>
                            </div>
                        {% endif %}
                        {% if action.cost %}
                            <div class="col-3">
                                <span class="tag green">Coût</span>
                                <p>{{ action.cost|nl2br }}</p>
                            </div>
                        {% endif %}
                        {% if action.animation %}
                            <div class="col-3">
                                <span class="tag blue">Besoin en animation PTGE</span>
                                <p>{{ action.animation|nl2br }}</p>
                            </div>
                        {% endif %}
                        {% if action.sector %}
                            <div class="col-3">
                                <span class="tag green">Secteurs</span>
                                <p>{{ action.sector|nl2br }}</p>
                            </div>
                        {% endif %}
                        {% if action.sage %}
                            <div class="col-3">
                                <span class="tag blue">Lien avec le SAGE de l’Armançon revisé</span>
                                <p>{{ action.sage|nl2br }}</p>
                            </div>
                        {% endif %}
                    </div>
                </div>

                {% if action.actionSteps|length > 0 %}
                    <div class="action-detail__steps">
                        <h2>La vie de l’action</h2>
                        <div class="action-detail__steps__wrapper">
                            <div class="row">
                                {% for step in action.actionSteps %}
                                    <div class="col-3 flex-column">
                                        <div class="action-detail__steps__wrapper__step sb s1 flex-column">
                                            <div class="number shortstack"><span>1</span></div>
                                            <img src="{{ asset('uploads/action/'~ step.filename) }}" class="action-detail__steps__wrapper__step__background" alt="{{ step.name }}">
                                            <div class="content flex-column">
                                                <h4>{{ step.name }}</h4>
                                                <p>
                                                    {{ step.description|nl2br }}
                                                </p>
                                            </div>
                                            {% if action.actionSteps|length >= 2 and loop.index is odd %}
                                                <img src="{{ asset('images/icons/fleche-bleu.svg') }}" class="arrow-bottom" alt="Flèche bleu">
                                            {% elseif action.actionSteps|length >= 3 and loop.index is even %}
                                                <img src="{{ asset('images/icons/fleche-verte.svg') }}" class="arrow-top" alt="Flèche verte">
                                            {% endif %}
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                {% endif %}
            </div>
        </section>
    </main>
{% endblock %}