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

{% set sectionName = 'All' %}
{% if gender != 'all' %}
    {% for section_in_gender in sectionsHierarchy[gender] %}
        {% if section_in_gender.slug == section %}
            {% set sectionName = section_in_gender.name %}
        {% endif %}
    {% endfor %}
{% endif %}

{% block title %}{{ gender|capitalize }} - {{ sectionName|capitalize }} - The Face{% endblock %}

{% block body %}

{% set classes = [
    'page-container',
    'page-container-models-list',
] %}

<section class="{{ classes|join(' ') }}" id="page-container-model-list-{{ gender }}-{{ section }}" data-title="{{ section }}" data-node-type="models-list" data-node-name="{{ gender }}-{{ section }}" data-meta-title="{{ gender|capitalize }} - {{ sectionName|capitalize }} - The Face">
    <h1 class="page-block in-view-block page-title models-list-title" data-node-type="in-view-block">{{ sectionName }}</h1>

    <div class="models-list-letters">
        <div class="models-list-letters-cont">
            <div class="models-list-letters-inner">
                {% for letter in 'a'..'z' %}
                    <span class="models-list-letter{% if letters[letter] is defined %} available{% endif %}" data-letter="{{ letter }}">{{ letter }}</span>
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="models-list" id="models-list">
        <div class="container-fluid">
            <div class="row models-list-row">
                <div class="col-xs-12 col-sm-4 model-block-sizer"></div>
                {% for model in m %}
                    {#{{ dump(model) }} #}
                    <a href="/model/{{ model.display }}{{ model.displayNb != 1 ? '/' ~ model.displayNb : '' }}" class="page-block in-view-block col-xs-12 col-sm-6 col-md-4 col-lg-3 model-block-list-{{ model.firstName|first|lower}}" data-node-type="in-view-block" data-node-type-target="model">
                        <div class="model-block-image">
                            <img src="{{booker_api_medias_url}}/{{model.modelId}}/{{model.thumbnailUrl}}" alt="{{ model.firstName }} {{ model.lastName }}" class="img-responsive model-block-img">
                            <div class="model-block-hover">
                                <div class="model-infos model-block-infos">
                                    {% if model.measurements %}
                                        {% for measurement in model.measurements %}
                                            {% if measurement %}
                                            <div class="model-info-group">
                                                <div class="model-info-group-title">{{ measurement[2] }}</div>
                                                <div class="model-info-group-value">{{ measurement[1] }} / {{ measurement[3] }}</div>
                                            </div>
                                            {% endif %}
                                        {% endfor %}
                                    {% endif %}
                                    {% if model.measurements %}
                                        {% for clothe in model.clothes %}
                                            {% if clothe %}
                                            <div class="model-info-group">
                                                <div class="model-info-group-title">{{ clothe[2] }}</div>
                                                <div class="model-info-group-value">{{ clothe[1] }} / {{ clothe[3] }}</div>
                                            </div>
                                            {% endif %}
                                        {% endfor %}
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        <div class="names">
                        <h4 class="model-block-firstname">{{ model.firstName }}</h4>
                        <h3 class="model-block-lastname">{{ model.lastName }}</h3>
                        </div>
                    </a>
                {% endfor %}

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

</section>

{% endblock %}