{% import "common/thumbnail.html.twig" as thumbnail %}
{% extends "common/index.html.twig" %}

{% block javascript %}
  <script type="text/javascript">
    {% if basket.getValidation() %}
    var releasable = {% if basket.getValidation().getParticipant(app.getAuthenticatedUser()).isReleasable() %}"{{ 'Do you want to send your report ?' | trans }}"{% else %}false{% endif %}
    {% endif %}
  </script>
    <script type="text/javascript" src="/assets/lightbox/js/lightbox-mobile{% if not app.debug %}.min{% endif %}.js"></script>
{% endblock %}

{% block stylesheet %}
    <link type="text/css" rel="stylesheet" href="/assets/lightbox/css/lightbox-mobile{% if not app.debug %}.min{% endif %}.css" />
{% endblock %}

{% block content %}
<div id="home" data-role="page">
    <div data-role="header">
    <a href="{{ path('lightbox') }}{% if basket.getValidation() %}#validation{% else %}#baskets{% endif %}" data-rel="back" data-icon="arrow-l">{{ 'Back' | trans }}</a>
    <h1>{{basket.getName()}}</h1>
    <a rel="external" href="{{ path('lightbox') }}" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">{{ 'Home' | trans }}</a>
  </div>
    <div data-role="content">
    <input type="hidden" id="basket_validation_id" value="{{ basket.getId() }}">
    <p>
      {% set basket_length = basket.getElements().count() %}
      {% trans with {'%basket_length%' : basket_length} %}%basket_length% documents{% endtrans %}
    </p>
    <ul class="image_set">
    {% for basket_element in basket.getElements() %}
      <li class="image_box" id="sselcontid_{{basket_element.getId()}}">
        {% if basket_element.getBasket().getValidation() and basket_element.getBasket().getValidation().getParticipant(app.getAuthenticatedUser()).getCanAgree() %}
          <div class="valid_choice valid_choice_{{basket_element.getId()}} {% if basket_element.getUserValidationDatas(app.getAuthenticatedUser()).getAgreement() == true %}agree{% elseif basket_element.getUserValidationDatas(app.getAuthenticatedUser()).getAgreement() == false and basket_element.getUserValidationDatas(app.getAuthenticatedUser()).getAgreement() is not null %}disagree{% endif %}">
          </div>
        {% endif %}
        <a href="{{ path('lightbox_ajax_load_basketelement', { 'sselcont_id' : basket_element.getId() }) }}">
          {{thumbnail.format(basket_element.getRecord(app).get_thumbnail(), 80, 80, '', true, false)}}
        </a>
        <input type="hidden" class="display_id" name="display_id" value="{{basket_element.getOrd()}}" />
      </li>
    {% endfor %}
    </ul>
  </div>
    <div data-role="footer">
        {% if basket.getValidation() and basket.getValidation().getParticipant(app.getAuthenticatedUser()).getCanAgree() %}
            <button class="confirm_report" style="width:100%;" title="{{ 'validation::envoyer mon rapport' | trans }}">
                {{ 'validation::envoyer mon rapport' | trans }}
                <img src="/assets/common/images/icons/loader1F1E1B.gif" style="visibility:hidden;" class="loader"/>
            </button>
        {% endif %}
  </div>
</div>
{% endblock %}