{% extends "Web/Global.php.twig" %}



{% block header %}
    <title>Back Office | Artists</title>
    <script>document.ontouchmove = function(e){ e.preventDefault(); }</script>

{% endblock %}

{% block scripts %}

{% endblock %}

{% block body %}

    <div id="content">

        <div class="content-wrapper content-wrap">
            <div class="back-link"> &nbsp;</div>
            <h1 class="Hmedium" >ARTISTS</h1>


            <div class="list-artists">

                {% for artist in artists %}

                    <a href="ArtistWorks?{{ artist.artistId }}"><span rel="{{ artist.artistId }}"
                                                                      class="hover-artist">{{ artist.firstname }} {{ artist.lastname }}</span></a>
                    <br/>
                {% endfor %}

            </div>
        </div>
        {#ARTISTS IMAGES HIDDED#}
        <div id="hidded-images">







            {% if is_mobile() %}

                <img class='showed landscape' id="img-{{ randArtist.artistId }}" src="{{ randArtist.getOneGrayMedia().getUrl('1000x0') }}" style="width:100%"/>
                <img class='portrait' src="{{ randArtist.getOneMobileGrayMedia().getUrl('1000x0') }}" title="{{ item.getTitle() }}"  style="width:100%"/>
            {% else %}
                <img id="img-{{ randArtist.artistId }}" src="{{ randArtist.getOneGrayMedia().getUrl('2500x0') }}"
                     class="showed" style="width: 2500px;"/>

            {% endif %}





            {% for artist in artists %}
                <img id="img-{{ artist.artistId }}" src="{{ artist.getOneGrayMedia().getUrl() }}"
                     class="hidded" style="width: 2500px;"/>
            {% endfor %}
        </div>
    </div>





{% endblock %}