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

{% block title %}
    {{ model.firstName|capitalize }} {{ model.lastName|capitalize }} - The Face
{% endblock %}

{% block body %}
    {% set gender = model.Num_sexe == 1 ? 'men' : 'women' %}

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

    {% set nodeName = (model.firstName
        |lower
        |replace({
            ' ': '-'
        }))
        ~ '-'
        ~ (model.lastName
            |lower
            |replace({
                ' ': '-'
            }))
    %}

    <section class="{{ classes|join(' ') }}"
        id="page-container-model-{{ nodeName }}"
        data-title="{{ model.firstName|capitalize }} {{ model.lastName|capitalize }}"
        data-node-type="model"
        data-node-name="{{ nodeName }}"
        data-meta-title="{{ model.firstName|capitalize }} {{ model.lastName|capitalize }} - The Face">
        {# {{ dump(model) }} #}
        {# --- INTRO --- #}
        <div class="page-block model-header"
            id="{{ nodeName }}-header"
            data-node-type="in-view-block">
            <div class="container-fluid model-header-container">
                {% set firstNameClass = '' %}
                {% if (model.firstName|length) >= 6 %}
                    {% set firstNameClass = 'long-text' %}
                {% endif %}
                {% if (model.firstName|length) >= 9 %}
                    {% set firstNameClass = 'very-long-text' %}
                {% endif %}

                <div class="col-12 col-sm-6 title">
                    <h1 class="page-title model-title">
                        <span class="model-title-firstname">
                            <span class="{{ firstNameClass }}">
                                {{ model.firstName|capitalize }}
                            </span>
                        </span>
                        <span class="model-title-lastname-cont">
                            {{ model.lastName|capitalize }}
                        </span>
                    </h1>
                </div>
                <div class="col-12 col-sm-4 col-md-5 text-right">
                    {% if book and book[0] and book[0].hd %}
                        <img class="img-responsive model-header-img"
                            src="{{ booker_api_medias_url }}/{{
                            model.modelId
                            }}/{{ book[0].hd }}" />
                    {% endif %}
                </div>
            </div>
        </div>

        {# {{ dump(model.measurements[0]|length) }}
    {{ dump(model.clothes[0]|length) }} #}

        {# --- INFOS --- #}
        <div class="container-fluid model-infos-bar">
            <div class="col-sm-12 col-lg-4 models-infos-bar-links">
                {% set categoryIndex = model.MODEL_TAGS[0] %}
                {% set category = sectionsHierarchy[gender][categoryIndex] %}
                <a href="/{{ gender }}/{{ category.slug }}"
                    class="model-infos-bar-back-link">
                    <i class="arrow left"></i> {{ category.name }}
                </a>
                <a href="#{{ nodeName }}-header"
                    data-target="{{ nodeName }}-header"
                    class="no-ajax-link model-infos-bar-link model-infos-bar-link-name"
                    data-index="0">
                    {{ model.firstName|capitalize }}
                    {{ model.lastName|capitalize }}
                </a>
                {% if book|length %}
                    <a href="#{{ nodeName }}-overview"
                        data-target="{{ nodeName }}-overview"
                        class="no-ajax-link model-infos-bar-link"
                        data-index="1">
                        Overview
                    </a>
                {% endif %}
                {% if videos %}
                    <a href="#{{ nodeName }}-videos"
                        data-target="{{ nodeName }}-videos"
                        class="no-ajax-link model-infos-bar-link"
                        data-index="2">
                        Videos
                    </a>
                {% endif %}
                <a href=""
                    class="no-ajax-link model-infos-bar-link model-infos-bar-link-pdf">
                    PDF
                </a>
            </div>
            <div class="col-sm-12 col-lg-8 model-infos model-infos-bar-infos">
                {% if
                    (model.measurements[0]|length) > 0
                        or (model.clothes[0]|length) > 0 %}
                    <div class="model-infos-bar-size active"
                        data-index="0"
                        data-size="eu">
                        EU
                    </div>
                    <div class="model-infos-bar-size"
                        data-index="1"
                        data-size="us">
                        US
                    </div>
                {% endif %}
                {% if model.measurements %}
                    {% for measurement in model.measurements %}
                        {% if measurement %}
                            {% set infoTitle = measurement[2] %}
                            {% if infoTitle == 'Height' %}
                                {% set infoTitle =
                                    '<span class="text-visible-xs">H</span><span class="text-visible-lg">eigh</span><span class="text-visible-xs">t</span>'
                                %}
                            {% elseif infoTitle == 'Bust' %}
                                {% set infoTitle =
                                    '<span class="text-visible-xs">B</span><span class="text-visible-lg">ust</span>'
                                %}
                            {% elseif infoTitle == 'Waist' %}
                                {% set infoTitle =
                                    '<span class="text-visible-xs">W</span><span class="text-visible-lg">aist</span>'
                                %}
                            {% elseif infoTitle == 'Chest' %}
                                {% set infoTitle =
                                    '<span class="text-visible-xs">Ch</span><span class="text-visible-lg">est</span>'
                                %}
                            {% elseif infoTitle == 'Hips' %}
                                {% set infoTitle =
                                    '<span class="text-visible-xs">Hi</span><span class="text-visible-lg">ps</span>'
                                %}
                            {% elseif
                                infoTitle == 'Hair'
                                    or infoTitle == 'Hair / color' %}
                                {% set infoTitle =
                                    '<span class="text-visible-xs">Ha</span><span class="text-visible-lg">ir</span>'
                                %}
                            {% elseif infoTitle == 'Eyes' %}
                                {% set infoTitle =
                                    '<span class="text-visible-xs">E</span><span class="text-visible-lg">yes</span>'
                                %}
                            {% endif %}
                            <div class="model-info-group">
                                <div class="model-info-group-title">
                                    {{ infoTitle|raw }}
                                </div>
                                <div class="model-info-group-value">
                                    {% if
                                        measurement[2] == 'Eyes'
                                            or measurement[2] == 'Hair' %}
                                        {{ measurement[3] }}
                                    {% else %}
                                        <span class="model-info-group-value-size eu active">
                                            {{ measurement[1] }}
                                        </span>
                                        <span class="model-info-group-value-size us">
                                            {{ measurement[3] }}
                                        </span>
                                    {% endif %}
                                </div>
                            </div>
                        {% endif %}
                    {% endfor %}
                {% endif %}
                {% if model.clothes %}
                    {% for clothe in model.clothes %}
                        {% if clothe %}
                            {% set infoTitle = clothe[2] %}
                            {% if
                                infoTitle == 'Shoes Women'
                                    or infoTitle == 'Shoes Men' %}
                                {% set infoTitle = 'Shoe' %}
                            {% endif %}
                            {% if infoTitle == 'Suit Men' %}
                                {% set infoTitle = 'Suit' %}
                            {% endif %}
                            <div class="model-info-group">
                                <div class="model-info-group-title">
                                    {{ infoTitle }}
                                </div>
                                <div class="model-info-group-value">
                                    {# {% if clothe[2] == '???' %}
                            {{ clothe[3] }}
                            {% else %} #}
                                    <span class="model-info-group-value-size eu active">
                                        {{ clothe[1] }}
                                    </span>
                                    <span class="model-info-group-value-size us">
                                        {{ clothe[3] }}
                                    </span>
                                    {# {% endif %} #}
                                </div>
                            </div>
                        {% endif %}
                    {% endfor %}
                {% endif %}
            </div>
        </div>

        <div class="model-part pdf-popup model-pdf-popup"
            id="{{ nodeName }}-pdf-popup">
            <div class="pdf-popup-inner">
                <h2 class="page-title model-title pdf-popup-title">
                    <span class="model-title-firstname">
                        {{ model.firstName|capitalize }}
                    </span>
                    <span class="model-title-lastname">
                        {{ model.lastName|capitalize }}
                    </span>
                </h2>
                <p class="pdf-popup-text">
                    Please select a print option below. <br />These files
                    require the free <a href="https://get.adobe.com/reader/"
                        target="_blank">
                        Adobe Acrobat Reader
                    </a>
                </p>
                <div class="pdf-popup-choices">
                    <a href="/model/{{ slug }}/{{ nb }}/pdf/dual"
                        class="no-ajax-link pdf-popup-choice"
                        target="_blank">
                        {% include 'svg/use.svg.twig' with {
                            classes: ['pdf-popup-choice-icon'],
                            icon: 'icon-dual'
                        } only %}
                    </a>
                    <a href="/model/{{ slug }}/{{ nb }}/pdf/eight"
                        class="no-ajax-link pdf-popup-choice"
                        target="_blank">
                        {% include 'svg/use.svg.twig' with {
                            classes: ['pdf-popup-choice-icon'],
                            icon: 'icon-eight'
                        } only %}
                    </a>
                </div>
            </div>
        </div>

        {# --- OVERVIEW --- #}
        {# {{ dump(book) }} #}
        {% if book|length %}
            <div class="page-block model-part container-fluid"
                id="{{ nodeName }}-overview"
                data-node-type="in-view-block">
                <div class="row model-image-row">
                    {% for p in book|slice(1) %}
                        {% if p and p.media_name %}
                            {% set imageClasses = ['model-image'] %}
                            {% if p.is_landscape == 1 %}
                                {% set imageClasses =
                                    imageClasses|merge(
                                        [
                                            'col-xs-12 col-sm-8 col-md-6 landscape'
                                        ]
                                    )
                                %}
                            {% else %}
                                {% set imageClasses =
                                    imageClasses|merge(
                                        ['col-xs-12 col-sm-4 col-md-3']
                                    )
                                %}
                            {% endif %}
                            <div class="page-block in-view-block {{ imageClasses|join(
                                    ' '
                                ) }}"
                                data-index="{{ loop.index0 }}"
                                data-node-type="in-view-block">
                                <figure class="model-image-inner">
                                    <img class="img-responsive model-img"
                                        src="{{ booker_api_medias_url }}/{{
                                        model.modelId
                                        }}/{{ p.media_name }}"
                                        data-hd="{{ booker_api_medias_url }}/{{
                                        model.modelId
                                        }}/{{ p.hd }}" />
                                </figure>
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
        {% endif %}

        {# --- SLIDESHOW --- #}
        {% include 'model/slideshow.html.twig' with {
            nodeName: nodeName,
            book: book,
            booker_api_medias_url: booker_api_medias_url,
            model: model
        } only %}

        {# --- VIDEOS --- #}
        {% if videos %}
            <div class="page-block model-part model-videos"
                id="{{ nodeName }}-videos"
                data-node-type="in-view-block">
                <div class="container-fluid">
                    <h2 class="model-part-title model-videos-title">
                        Videos
                    </h2>
                    <div class="model-videos-list">
                        {% set videoIndex = 1 %}
                        {% for video in videos %}
                            {% if '.flv' in video.media_name %}

                            {% else %}
                                <div class="page-block in-view-block col-sm-offset-1 col-sm-10 model-video"
                                    data-node-type="in-view-block">
                                    <video class="model-video-player" controls>
                                        <source src="{{
                                            booker_api_medias_url
                                            }}/{{ model.modelId }}/{{
                                            video.media_name
                                            }}"
                                            type="video/mp4" />
                                    </video>
                                    <div class="model-video-infos">
                                        <h3 class="model-video-title">
                                            Video{% if
                                                videoIndex < 10 %}0{% endif %}{{
                                                videoIndex
                                            }}
                                        </h3>
                                        {# <h4 class="model-video-subtitle">[Subtitle]</h4> #}
                                    </div>
                                </div>
                                {% set videoIndex = videoIndex + 1 %}
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
            </div>
        {% endif %}
    </section>
{% endblock %}