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

{% block title %}Hello DefaultController!{% endblock %}

{% block body %}
    <style>
        body{
            background: #313543;
        }
        .example-wrapper {
            margin: 1em auto;
            max-width: 1600px;
            width: 95%;
            font: 18px/1.5 sans-serif;
        }

        figure{
            max-height: 422px;
            max-width: 479px;
            overflow: auto;
            padding: 0;
            margin: 5px;
        }
        .example-wrapper img {
            width: 100%;
            float:left;
            min-height: 422px;
        }
        .example-wrapper strong {
            float: left;
            margin-top: -3em;
            position: relative;
            padding: 0.5em;
            background: rgba(0, 0, 0, .7);
            color: #fff;
            width: 100%;
            text-align: right;
        }

        .example-wrapper code {
            background: #F5F5F5;
            padding: 2px 6px;
        }
        a{
            float:left;
        }
        a:hover strong{
            color: #ddd;
            background: rgba(0, 0, 0, .7);
        }
        img {
            max-width: 90vw;
            margin-right: 1em;
            /*margin-bottom: 1em;*/
            /*width: 600px;*/
        }
    </style>

    <div class="example-wrapper">
        <h1>Découverte d'artistes sur mastodon</h1>

        <h2>

            {{ data | length }} Images
        </h2>

        {#        {{ (data) | length }}#}
        <fieldset>

            <h2> liste des images</h2>
            {% for img in (data) %}
                {#            {{ img }}#}
                {#            {{ img.media_attachments | length }}#}
                {% for media in img.media_attachments %}
                    <a href="{{ img.url }}">
                        <figure>


                            <img src="{{ media.preview_url }}" alt="image" class="gallery_img /">
                            <strong>
                                {{ img.account.acct }}
                            </strong>
                        </figure>
                    </a>
                {% endfor %}
            {% endfor %}

        </fieldset>

    </div>
    <style>

    </style>
{% endblock %}