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

{% set pageTitle = "projects"|trans|title %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('styles/projects.css') }}">
{% endblock %}

{% set tags = getProjectTags(app.request) %}

{% block content %}

    {% include "components/_intro.html.twig" with {options: {
        title: "projects_intro_title"|trans|title,
        description: "projects_intro_description"|trans|capitalize,
        skip: ".projects",
        bg: false,
        projectSearch: true
    }} %}

    <div class="section-wrapper projects-wrapper">
        <div class="content-section projects">
            {% set projectItems = getProjects({'projectsPage': true, 'query': app.request.get('s'), 'tags': app.request.get('tags')}, app.request) %}
            {% if projectItems|length == 0 %}
                <span class="project-not-found not-found">{{"project_not_found"|trans|capitalize}}</span>
            {% else %}
                {% for project in projectItems %}
                    {% set projectLang = getLang(project.getProjectLangs(), app.request) %}

                    <div class="project-item" onclick="window.open('{{ 'https://'~project.link }}', '_blank').focus()">
                        <div class="project-item-top">
                            <h2>{{ projectLang.title|raw }}</h2>
                            <div class="border-button big-button"><div class="arrow-right arrow-dark"></div></div>
                        </div>
                        <div class="project-item-content">
                            <div class="project-logo"><img src="{{ asset('img/projects/'~project.iconImage) }}" class="brand-logo"></div>
                            {% if project.tagIdArray and project.tagIdArray["content"]|length > 0 %}
                                <div class="project-tags tag-container">
                                        {% for tagId in project.tagIdArray["content"] %}
                                            {% set tag = getProjectTag(tagId, app.request) %}
                                            <div class="tag blog-tag">{{tag}}</div>
                                        {% endfor %}
                                </div>
                            {% endif %}
                            <a class="black-button project-link standart-button arrow-anim">{{ project.link }}</a>
                        </div>
                    </div>
                {% endfor %}
            {% endif %}
        </div>
    </div>
{% endblock %}