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

{% block title %}{{ advertiser.company }}{% endblock %}

{% block content %}

<div class="container">
    <h1 class="title">La page de {{ advertiser.company }} </h1>

    {% if (catalogs|length >  0) %}
        <div class="row justify-content-between">
            {% for catalog in catalogs %}
                {% set title = catalog.title|length > 40 ? catalog.title[:40]~'...' : catalog.title %}

                <div class="col col-lg-3 col-md-4 col-sm-12 d-flex justify-content-center">
                    <div class="card" style="width: 18rem;">
                        <img class="card-img-top" src="{{ asset("images/men/"~catalog.cover.filename) }}" alt="{{ catalog.title}}">
                        <div class="card-body">
                            <h5 class="card-title">{{ title|upper }}</h5>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="btn-group">
                                    <a href="{% if (catalog.slug is null) %}{{ path('app_catalog_id', {id:catalog.id}) }}{% else %}{{ path('app_catalog_slug', {slug:catalog.slug}) }} {% endif %}" type="button" class="btn btn-sm btn-outline-secondary">Voir</a>
                                    <button type="button" class="btn btn-sm btn-outline-secondary">Autres</button>
                                </div>
                                <small class="text-muted">{{ catalog.live }}</small>
                            </div>
                                                    
                        </div>
                    </div>        
                </div>       
            {% endfor %}
        </div>    
    {% endif %}

    <div class="card mb-3" style="max-width: 100%;">
        <div class="row no-gutters">
            <div class="col-md-4">
                <img src="{{ asset('images/men/'~advertiser.logobig.filename)}}" class="card-img" alt="{{ advertiser.company }}">
            </div>
            <div class="col-md-8">
                <div class="card-body">
                    <h5 class="card-title">A propos de {{ advertiser.company }}</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Contacts</h6>
                    <p class="card-text">{{ advertiser.completeadress }}</p>
                    <p class="card-text">Téléphone : {{ advertiser.phones }}</p>
                    <a href="{{advertiser.facebook}}" class="card-link">Sur Facebook</a>
                    <a href="{{ advertiser.twitter }}" class="card-link">Leur site web</a>
                    <a href="{{ advertiser.linkedin }}" class="card-link">Sur Instagram</a>
                    <h6 class="card-subtitle mt-4 mb-2 text-muted">Les trouver</h6>
                    {% for maps in advertiser.googlemaps %}
                        <p class="card-text"><small class="text-muted">
                            <b>{{ maps.caption }}</b>
                            <br>
                            Horaires : {{ maps.comment }}
                            <br>
                            Tél. : {{ maps.phone }}
                            <br>
                            Coordonnées : {{ maps.latitude }} x {{ maps.longitude }}
                        </small></p>
                    {% endfor %}
                    
                </div>
            </div>
        </div>
    </div>



</div>

{% endblock %}