{# templates/projects/index.html.twig #}
{% extends '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 %}