{% extends 'layout.html.twig' %}
{% block title %}{{ getLocalizedStr('projects.project') }} {{ getDynLocalizedStr(project.name) }} - {% endblock %}
{% block content %}
    <div class="container project-page">
        <div class="about-header">
            <a href="/#pro-projects">{{ getLocalizedStr('go-back-to-main') }}</a>
        </div>
        <div>
        <h1>{{ getLocalizedStr('projects.project') }} {{ getDynLocalizedStr(project.name) }}</h1>
       
        <div class="project-header">
            <div class="project-description">
                {{ getDynLocalizedStr(project.description) | formatMd | raw }}
            </div>
            <div class="project-date">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-calendar-event" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <rect x="4" y="5" width="16" height="16" rx="2"></rect>
   <line x1="16" y1="3" x2="16" y2="7"></line>
   <line x1="8" y1="3" x2="8" y2="7"></line>
   <line x1="4" y1="11" x2="20" y2="11"></line>
   <rect x="8" y="15" width="2" height="2"></rect>
</svg>
<span>{{ project.date }}</span>
            </div>
            <div class="project-link">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path>
   <path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path>
</svg>
            <a href="{{ project.link}}">
                {% if project.action is defined %}
                    {{ getDynLocalizedStr(project.action) }}
                {% else %}
                    {{ getLocalizedStr('external-website') }}
                {% endif %}
            </a>
            </div>

        </div>

        {% if project.images is defined and project.images|length > 0 %}
        <script id ="project-images-data" type="application/json">
        [
            {% for img in project.images %}
                {
                    "id": "{{ img.id }}",
                    "name": "{{ getDynLocalizedStr(img.name) | raw }}",
                    "description": "{% if img.description is defined %}{{ getDynLocalizedStr(img.description) | raw }}{% else %}{{ getDynLocalizedStr(img.name) | raw }}{% endif %}",
                    "image": "/imgs/projects/{{project.id}}/{{img.id}}.png"
                }{% if not loop.last %},{% endif %}
            {% endfor %}
        ]
        </script>
        <h2>{{ getLocalizedStr('projects.images') }}</h2>
        <div class="project-images-container">
            <div class="project-images">
            {% for img in project.images %}
                <div class="img" onclick="openModal('{{ img.id }}')">
                    <img src="/imgs/projects/{{ project.id }}/{{ img.id }}.png.35.png" alt="{{ getDynLocalizedStr(img.name) }}" />
                </div>
            {% endfor %}
            </div>
        </div>
        <div class="media-modal-container" id="media-modal" style="display: none;">
          <div class="media-modal">
            <div class="media-modal-content" id="media-modal-content">
              
            </div>
            <div class="media-close" onclick="closeModal()">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-minus" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <circle cx="12" cy="12" r="9"></circle>
   <line x1="9" y1="12" x2="15" y2="12"></line>
</svg>
             </div>
          </div>
          <div id="caption" class="media-caption"></div>
          <div id="left-nav" class="media-left-nav media-nav" onclick="navLeft()">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-left" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <line x1="5" y1="12" x2="19" y2="12"></line>
   <line x1="5" y1="12" x2="11" y2="18"></line>
   <line x1="5" y1="12" x2="11" y2="6"></line>
</svg>
          </div>
          <div id="right-nav" class="media-right-nav media-nav" onclick="navRight()">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <line x1="5" y1="12" x2="19" y2="12"></line>
   <line x1="13" y1="18" x2="19" y2="12"></line>
   <line x1="13" y1="6" x2="19" y2="12"></line>
</svg>
          </div>
        </div>
        {% endif %}

        {% if project.background is defined %}
        <h2>{{ getLocalizedStr('projects.background') }}</h2>
        {{ getDynLocalizedStr(project.background) | formatMd | raw }}
        {% endif %}

        {% if project.solution is defined %}
        <h2>{{ getLocalizedStr('projects.solution') }}</h2>
        {{ getDynLocalizedStr(project.solution) | formatMd | raw }}
        {% endif %}
        
        {% if project.highlights is defined %}
        <h2>{{ getLocalizedStr('projects.highlights') }}</h2>
        <ul class="project-highlights">
            {% for highlight in project.highlights[getLocale()] %}
            <li>{{ highlight }}</li>
            {% endfor %}
        </ul>
        {% endif %}

        <h2>{{ getLocalizedStr('projects.technologies') }}</h2>
        <div class="chips">
        {% for tech in project.technologies %}
            <div class="project-technology chip">
                {{ tech.name }}
            </div>
        {% endfor %}
        </div>
        </div>
    </div>
{% endblock %}