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

{% block page_content %}
<div class="px-4 py-5 my-5 text-center">
    <h1 class="display-5 fw-bold text-body-emphasis">{{ long_title }}</h1>
    <div class="col-lg-6 mx-auto">
      <p class="lead mb-4">Gère les tâches, même avec des nœuds (ou pas).</p>
      <p class="lead mb-4">L’idée c’est d’avoir un petit outil collaboratif simple et facile à administrer/utiliser pour mapper des trucs de façon coordonnée à un endroit.</p>
      <p class="text-muted mb-4">Si d’aventure vous souhaitez contacter le développeur, merci d’écrire à <a href="mailto:v+osm@caboulot.org?subject={{ short_title }}">v+osm@caboulot.org</a></p>
      <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
          <a class="btn btn-primary btn-lg px-4 gap-3" href="{{ path('app_project') }}">Voir les projets</a>
      </div>
    </div>
  </div>
</div>
{% if popularProjects is not empty %}
<section class="container">
    <div class="row">
        <div class="col mb-3">
            <h2>Projets populaires</h2>
        </div>
    </div>
    <div class="row">
        {% for project in popularProjects %}
        <div class="col-12 col-md-4 mb-3">
            <div class="card h-100">
                <div class="card-body">
                    <h3 class="card-title">
                        {{ project.name }}
                        {% for tag in project.tags %}
                        <span class="badge text-bg-info ms-2">{{ tag.name }}</span>
                        {% endfor %}
                    </h3>
                    <p class="card-subtitle mb-2 text-muted">{% include 'partials/_project-metadata.html.twig' %}</p>
                    {% if project.description %}<p class="card-text">{{ project.description|markdown_to_html }}</p>{% endif %}
                    <a href="{{ path('app_project_show', {'slug': project.slug}) }}" class="btn btn-primary">En savoir plus</a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</section>
{% endif %}

{% endblock %}