templates/navigation/show.html.twig line 1

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

{% block body %}
    <div class="mb-75">
        <section class="row">
            {% if element.pictures is not empty %}
                <div id="carousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-interval="false">
                    <div class="carousel-indicators">
                        {% for index, picture in element.pictures %}
                            <button data-bs-target="#carousel" class="carousel-indicator" type="button" data-bs-slide-to="{{ index }}"></button>
                        {% endfor %}
                    </div>
                    <div class="carousel-inner">
                        {% for picture in element.pictures %}
                            <div class="carousel-item">
                                <div style="background-image: url('{{ picture.url }}'); background-size: cover; background-position: center; height: 220px; width: 100%;"></div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            {% else %}
                <div class="carousel-inner">
                    <div style="background-image: url('{{ element.picture }}'); background-size: cover; background-position: center; height: 220px; width: 100%;"></div>
                </div>
            {% endif %}
        </section>
        <header id="show-header">
            <div class="col-12 show-title">{{ element.name }}</div>
            <div class="col-12 show-address">
                {{ element.address }}<br />
                {{ element.zipCode }} {{ element.town }}
            </div>
        </header>
        <section id="information-container">
            <span class="paragraph">{{ element.description|raw }}</span>
        </section>

        <section id="information-container">
            <h5 class="show-subtitle">Contacts</h5>
            <ul id="contact">
                {% if element['website'] is not empty %}
                <li><img class="info-logo" src="{{ asset('build/images/globe.svg') }}">
                    <a href="{{ element['website'][0] }}/">{{ '<span style="text-decoration:underline">Voir notre site internet</span>' }}</a></li>
                {% endif %}
                {% if element['phones'][0] is not empty %}
                <li><img class="info-logo" src="{{ asset('build/images/phone.svg')}}">
                    <a href="tel://{{ element['phones'][0] }}/">{{ element['phones'][0] }}</a></li>
                {% endif %}
                {% if element['mails'][0] is not empty %}
                <li><img class="info-logo" src="{{ asset('build/images/email.svg') }}">
                    <a href="mailto:{{ element['mails'][0] }}">{{ element['mails'][0] }}</a></li>
                {% endif %}
            </ul>
        </section>
        <a id="button"></a>
        
        
        <style>
            .entity-layout {
                width: 99%;
                min-height: 120px;
                display: flex;
                flex-direction: row;
                align-items: center;
                background-color: white;
                border-radius: 15px;
                padding: 1rem 2rem;
                box-sizing: border-box;
                box-shadow: 0 6px 15px 1px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
                margin-bottom: 10px;
            }
            
            .entity-layout img {
                border-radius: 50%;
                border-style: solid;
                border-width: 1px;
                object-fit: contain;
                height: 60px;
                min-width: 60px;
                max-width: 60px;
            }
            
            .content {
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                margin-left: 1.5rem;
                margin-top: -4px;
            }
            
            .content .title {
                font-size: 1.2rem;
                line-height: 1.5rem;
                margin-bottom: 10px;
            }
            
            .content .description {
                font-size: 1rem;
                line-height: 1.5rem;
            }
        </style>
        
        {% if onplace is not empty %}
        <section id="information-container">
            <h5 class="show-subtitle">A retrouver sur place</h5>
            {% for item in onplace %}
                <a href="{{ item.url }}" target="_blank" style="text-decoration: none;">
                    <div class="entity-layout">
                        <img src="{{ item.logo }}" alt="">
                        <div class="content">
                            <div class="title">{{ item.name }}</div>
                            <div class="description">{{ item.type }}</div>
                        </div>
                    </div>
                </a>
            {% endfor %}
        </section>
        
        {% endif %}
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        $(function() {
            $('.items input').on('change', function() {
                $('.' + $(this).attr('data-value')).fadeToggle(200);
            })

            $(window).scroll(function() {
                if (0 === $(window).scrollTop()) {
                    $('#button').removeClass('show');
                } else {
                    $('#button').addClass('show');
                }
            });

            $('#button').on('click', function (e) {
                e.preventDefault();
                $('html, body').animate({scrollTop:0}, '300');
            })

            $('.carousel-indicator').first().addClass('active').attr('aria-current', true);
            $('.carousel-item').first().addClass('active');
        })
    </script>
{% endblock %}