{% extends 'default/layout.html.twig' %}
{% block title %}{{ 'Edit torrent poster' | trans }} - {{ 'Torrent' | trans }} #{{ torrentId }} - {{ name }}{% endblock %}
{% block main_content %}
    <div class="padding-24-px margin-y-8-px border-radius-3-px background-color-night">
        <div class="margin-b-24-px padding-b-16-px border-bottom-default">
            <h1>
                {{'Edit poster for torrent' | trans }}
                <a href="{{ path('torrent_info', { torrentId : torrentId }) }}">#{{ torrentId }}</a>
            </h1>
        </div>
        <form name="poster" method="post" enctype="multipart/form-data" action="{{ path('torrent_poster_edit', { torrentId : torrentId }) }}">
            <div class="margin-y-16-px">
                {% for error in form.poster.error %}
                    <div class="text-color-red margin-b-8-px">
                        {{ error }}
                    </div>
                {% endfor %}
                <input class="width-100" type="file" name="poster" value="" />
            </div>
            <div class="margin-y-16-px">
                <input type="radio" name="position" id="position-center" value="center" {% if form.position.attribute.value == 'center' %}checked="checked"{% endif %} />
                <label class="margin-x-4-px" for="position-center">
                    {{ 'Center' | trans }}
                </label>
                <input type="radio" name="position" id="position-top" value="top" {% if form.position.attribute.value == 'top' %}checked="checked"{% endif %} />
                <label class="margin-x-4-px" for="position-top">
                    {{ 'Top' | trans }}
                </label>
                <input type="radio" name="position" id="position-bottom" value="bottom" {% if form.position.attribute.value == 'bottom' %}checked="checked"{% endif %} />
                <label class="margin-x-4-px" for="position-bottom">
                    {{ 'Bottom' | trans }}
                </label>
            </div>
            <div class="padding-t-4-px margin-b-16-px border-bottom-default"></div>
            <div class="text-right">
                <a class="margin-r-8-px" href="{{ path('torrent_info', { torrentId : torrentId }) }}">
                    {{ 'cancel' | trans }}
                </a>
                <input class="button-green" type="submit" value="{{'Submit'|trans }}" />
            </div>
        </form>
    </div>
    {% for edition in editions %}
        <div class="padding-x-24-px padding-y-16-px margin-y-8-px border-radius-3-px {% if edition.active %}background-color-night-light{% else %}background-color-night{% endif %} {% if edition.poster %}background-poster{% endif %}"
             {% if edition.poster %}style="background-image:url('{{ edition.poster }}');background-position:{{ edition.position }}"{% endif %}>
            {% if edition.active %}
                {{ edition.added | format_ago }}
            {% else %}
                <a href="{{ path('torrent_poster_edit', { torrentId : torrentId, torrentPosterId : edition.id }) }}">
                    {{ edition.added | format_ago }}
                </a>
            {% endif %}
            {{ 'by' | trans }}
            <a href="{{ path('user_info', { userId : edition.user.id }) }}">
                <img class="border-radius-50 border-color-default vertical-align-middle" src="{{ edition.user.identicon }}" alt="{{'identicon'|trans }}" />
            </a>
            <div class="float-right">
                {% if session.moderator or session.owner %}
                    <a class="margin-r-8-px text-color-red" href="{{ path('torrent_poster_delete', { torrentId : torrentId, torrentPosterId : edition.id }) }}" title="{{ 'Delete' | trans }}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
                            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
                        </svg>
                    </a>
                {% endif %}
                {% if edition.approved %}
                    {% if session.moderator %}
                        <a href="{{ path('torrent_poster_approve', { torrentId : torrentId, torrentPosterId : edition.id }) }}" title="{{ 'Disapprove' | trans }}">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                            </svg>
                        </a>
                    {% else %}
                        <span title="{{ 'Approved' | trans }}">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                            </svg>
                        </span>
                    {% endif %}
                {% else %}
                    {% if session.moderator %}
                        <a href="{{ path('torrent_poster_approve', { torrentId : torrentId, torrentPosterId : edition.id }) }}" title="{{ 'Approve' | trans }}">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-hourglass" viewBox="0 0 16 16">
                                <path d="M2 1.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1h-11a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1-.5-.5zm2.5.5v1a3.5 3.5 0 0 0 1.989 3.158c.533.256 1.011.791 1.011 1.491v.702c0 .7-.478 1.235-1.011 1.491A3.5 3.5 0 0 0 4.5 13v1h7v-1a3.5 3.5 0 0 0-1.989-3.158C8.978 9.586 8.5 9.052 8.5 8.351v-.702c0-.7.478-1.235 1.011-1.491A3.5 3.5 0 0 0 11.5 3V2h-7z"/>
                            </svg>
                        </a>
                    {% else %}
                        <span title="{{ 'Waiting for approve' | trans }}">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-hourglass" viewBox="0 0 16 16">
                                <path d="M2 1.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1h-11a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1-.5-.5zm2.5.5v1a3.5 3.5 0 0 0 1.989 3.158c.533.256 1.011.791 1.011 1.491v.702c0 .7-.478 1.235-1.011 1.491A3.5 3.5 0 0 0 4.5 13v1h7v-1a3.5 3.5 0 0 0-1.989-3.158C8.978 9.586 8.5 9.052 8.5 8.351v-.702c0-.7.478-1.235 1.011-1.491A3.5 3.5 0 0 0 11.5 3V2h-7z"/>
                            </svg>
                        </span>
                    {% endif %}
                {% endif %}
            </div>
            {% if edition.active %}
                <form name="poster-edition-{{ edition.id }}" method="post" action="{{ path('torrent_poster_edit', { torrentId : torrentId }) }}">
                    <input type="hidden" name="id" value="{{ edition.id }}" />
                    <div class="margin-y-16-px">
                        <input type="radio" name="position" id="poster-edition-{{ edition.id }}-position-center" value="center" {% if edition.position == 'center' %}checked="checked"{% endif %} />
                        <label class="margin-x-4-px" for="poster-edition-{{ edition.id }}-position-center">
                            {{ 'Center' | trans }}
                        </label>
                        <input type="radio" name="position" id="poster-edition-{{ edition.id }}-position-top" value="top" {% if edition.position == 'top' %}checked="checked"{% endif %} />
                        <label class="margin-x-4-px" for="poster-edition-{{ edition.id }}-position-top">
                            {{ 'Top' | trans }}
                        </label>
                        <input type="radio" name="position" id="poster-edition-{{ edition.id }}-position-bottom" value="bottom" {% if edition.position == 'bottom' %}checked="checked"{% endif %} />
                        <label class="margin-x-4-px" for="poster-edition-{{ edition.id }}-position-bottom">
                            {{ 'Bottom' | trans }}
                        </label>
                    </div>
                    <div class="padding-t-4-px margin-b-16-px border-bottom-default"></div>
                    <div class="text-right">
                        <input class="button-green" type="submit" value="{{'Submit'|trans }}" />
                    </div>
                </form>
            {% endif %}
        </div>
    {% endfor %}
{% endblock %}