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

{% block page_title %}
    {{- _page.title.value -}}
{% endblock %}

{% block body %}
    <div class="col-12">
        <div class="body">
            <div class="body-content">
                {{- _page.content.value|murph_url|markdown('post') -}}
            </div>
        </div>
    </div>

    <div class="grid grid-flow-row-dens grid-cols-12 md:p-8 gap-5">
        {% for project in projects %}
            <div class="card shadow-md col-span-12 md:col-span-6 lg:col-span-4 m-3 bg-box">
                <div class="card">
                    {% if project.image %}
                        <figure>
                            <img src="{{ asset(project.image)|imagine_filter('project_preview_filter') }}" alt="{{ project.label }}">
                        </figure>
                    {% endif %}
                    <div class="card-body">
                        <h2 class="card-title">{{ project.label }}</h2>

                        {{- project.description|murph_url|markdown('post') -}}

                        <div class="card-actions mt-5">
                            {% for link in project.links %}
                                <a class="btn" href="{{ link.url|murph_url }}" target="_blank">
                                    {{- link.label -}}
                                </a>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
{% endblock %}
