{% 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[app.request.locale] }}</h1>
    <div class="col-lg-6 mx-auto">
      <p class="lead mb-4">{{ 'text.home1'|trans }}</p>
      <p class="lead mb-4">{{ 'text.home2'|trans }}</p>
      <p class="text-muted mb-4">{{ 'text.home3'|trans({'%mailto_link%': '<a href="mailto:v+osm@caboulot.org?subject='~short_title[app.request.locale]~'">v+osm@caboulot.org</a>'})|raw }}</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') }}">{{ 'button.goto_projects'|trans }}</a>
      </div>
    </div>
  </div>
</div>
{% if popularProjects is not empty %}
<section class="container">
    <div class="row">
        <div class="col mb-3">
            <h2>{{ 'title.popular_projects'|trans }}</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">{{ 'button.more'|trans }}</a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</section>
{% endif %}

{% endblock %}