{% extends 'base.html.twig' %}
{% block title %}
    {% if app.request.locale == "hr" %}
        {{ Project.title }} - {{ 'translate.projects'|trans }} - LED & LCD displays
    {% elseif app.request.locale == "de" %}
        {{ Project.title }} - {{ 'translate.projects'|trans }} - LED & LCD displays
    {% else %}
        {{ Project.title }} - {{ 'translate.projects'|trans }} - LED & LCD displays
    {% endif %}
{% endblock %}

{% block body %}

    {% include('elements/_navigation.html.twig') %}

    <section class="contact-section-background text-center">
        <div class="container-fluid contact-section">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        {% if app.request.locale == "hr" %}
                            <h3 class="text-white product-title">Naši projekti</h3>
                        {% elseif app.request.locale == "de" %}
                            <h3 class="text-white product-title">Projekte</h3>
                        {% else %}
                            <h3 class="text-white product-title">Our projects</h3>
                        {% endif %}

                    </div>
                </div>
            </div>
        </div>

    </section>

    <section class="rental-light-blue">
        <div class="container-fluid">
            <div class="container">
                <div class="row">
                    <div class="col-6 col-sm-6 col-md-6 col-lg-3 col-xl-3 col-xxl-3"><span class="event mb-2">{{ 'translate.projects'|trans }}</span><br/>
                        <a href="{{ path('projects_page') }}" class="all mr-5">{{ 'translate.see_all'|trans }}</a>
                    </div>
                    <div class="col-6 col-sm-6 col-md-6 col-lg-9 col-xl-9 col-xxl-9"><span class="event mb-2">{{ 'translate.projects'|trans }}</span><br>
                        <h3>{{ Project.title }}</h3>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="projects sec-50">
        <div class="container">
            <div class="row">
                <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 col-xxl-6">



                        <div class="col mb-5">
                            <div class="card mycard h-100">
                                {%  if Project.video %}
                                <div class="my-video ratio ratio-16x9">
                                    <iframe class="embed-responsive-item " src="https://www.youtube.com/embed/{{ Project.video }}?rel=0" allowfullscreen></iframe>
                                </div>
                                {% else %}
                                <a href="{{ asset('uploads/images/' ~ Project.image) }}" data-fancybox="gallery"><img src="{{ asset('uploads/images/' ~ Project.image) }}" class="card-img-top" alt="{{ Project.title }}"/></a>
                                {%  endif %}
                                <div class="card-body">
                                    <div class="sharethis text-center mb-3">
                                        <!-- ShareThis BEGIN --><div class="sharethis-inline-share-buttons"></div><!-- ShareThis END -->
                                    </div>
                                    <div class="project-images mb-5">
                                        <div class="row">
                                        {% for image in ProjectImages %}

                                                <div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3 col-xxl-3 p-1">
                                                    <a href="{{ asset('uploads/images/' ~ image.path) }}" data-fancybox="gallery"><img src="{{ asset('uploads/images/' ~ image.path) }}" class="img-fluid pb-1" alt="{{ Project.title }}"/></a>
                                                </div>

                                        {% endfor %}
                                        </div>
                                    </div>
                                    <h5 class="card-title">{{ Project.title }}</h5>

                                    <p class="card-text">{{  Project.text|raw }}</p>
                                    {%  if ProjectDocuments is not empty %}
                                    <div class="documents">
                                        <table class="table">
                                            <thead>
                                            <tr>

                                                <th scope="col">Naslov</th>
                                                <th scope="col">Download</th>

                                            </tr>
                                            </thead>
                                            <tbody>
                                            {% for doc in ProjectDocuments %}
                                            <tr>

                                                <td>{{ doc.name }}</td>
                                                <td><a href="{{ asset('uploads/images' ~ doc.path) }}" class="btn btn-primary btn-sm">Download</a></td>

                                            </tr>
                                            {% endfor %}

                                            </tbody>
                                        </table>
                                    </div>
                                    {% endif %}
                                </div>
                                <div class="card-footer">
                                    <small class="text-muted">{{  Project.published|date("m.d.Y.")}}</small>
                                </div>
                            </div>
                        </div>


                </div>
                <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 col-xxl-6">
                    {% include('elements/_projects_page_content.html.twig') %}
                </div>
            </div>
        </div>
    </section>

    {% include('elements/_footer.html.twig') %}



{% endblock %}