{# templates/projects/index.html.twig #}
{% extends '@default/base.html.twig' %}

{% block title %} Projects {% endblock %}

{% block body %}
    <div class="container-fluid box">
        <div class="row">
            <h2>This is an overview of my current public (and open source) projects.</h2>

            <!-- projects List -->
            <div class="col-sm-12">
                {% for project in projects %}
                    <div class="project-container bg-dark my-4">
                        <div class="row">
                            <div class="col-sm-3">
                                <a href="{{ path('app_projects', { name: project.name }) }}">
                                    {% if project.teaserImage %}
                                        <img
                                                class="blog-img"
                                                src="/uploads/projects/{{  project.teaserImage  }}"
                                                alt="Teaser">
                                    {% else %}
                                        <img
                                                class="blog-img"
                                                src="{{ asset('build/images/24unix/24_logo_bg_96x96.png') }}"
                                                alt="Teaser">
                                    {% endif %}
                                </a>
                                <br>
                                <div>
                                    {% for developer in project.developer %}
                                        <a class="align-left blog-details"
                                           href="{{ path('app_profile', { 'username':developer.username }) }}">
                                            <img class="article-author-img rounded-circle"
                                                 src="{{ asset('build/images/tracer_schmolle.png') }}"
                                                 alt="profile"></a>
                                        <a href="{{ path('app_profile', { 'username':developer.username }) }}">{{ developer.username }}</a>
                                    {% endfor %}
                                </div>

                            </div>
                            <div class="col-sm-8 mt-2">
                                <a href="{{ path('app_projects', { name: project.name }) }}">
                                    <div class="article-title d-inline-block pl-3 align-middle">
                                        <h2>{{ project.name }}</h2>
                                    </div>
                                </a>
                                <br>
                                <div class="blog-teaser mb-2 pb-2 text-xl-start">
                                    {{ project.description }}
                                    <br>
                                    <br>
                                    started: {{ project.createdAt | ago }}
                                </div>
                            </div>
                        </div>

                    </div>
                {% endfor %}
            </div>

            {% if is_granted('ROLE_ADMIN') %}
                <div class="text-xl-start">
                    <a href="{{ path('app_main') }}"><i class="fa fa-plus-circle"></i></a>
                </div>
            {%  endif %}
        </div>
    </div>
{% endblock %}