{% load i18n %}
{% block cell-content %}
  <style>
    .regie-name {
      padding-left: 0.8em;
    }
    .basket_ul {
      padding-left: 1em;
    }
    .basket_ul li {
      list-style-type: none;
      margin-bottom: 1em;
    }
    .basket_ul li a:not(.pk-button) {
      text-decoration: underline;
      text-decoration-thickness: 0.09em;
      text-decoration-style: dotted;
      transition: all linear .1s;
      text-underline-offset: 0.35em;
    }
    .basket_ul li a:hover {
      text-decoration: none;
    }
    .lingo_item_price {
      font-weight: 600;
      margin: 10px;
    }
    .lingo_cancelable {
      padding: 2px 13px !important;
      margin-left: 9.5em !important;
    }
    #new-command {
      margin: 0 1em 1em 1em;
    }
    .total_price_row {
      margin-bottom: 1.6em !important;
      margin-top: 2em;
    }
    .total_price {
      font-weight: bold;
    }
  </style>
  <div>
    {% if regies %}
      <h2>{% trans "Basket" %}</h2>
      {% for regie_info in regies %}
        {% if regies|length != 1 %}<h3 class="regie-name">{{regie_info.regie.label}}</h3>{% endif %}
        <form action="{% url 'lingo-pay' %}" method="post">
          {% csrf_token %}
          <input type="hidden" name="next_url" value="{{ cell.page.get_online_url }}" />
          <input type="hidden" name="regie" value="{{regie_info.regie.id}}" />
          <ul class="basket_ul">
            {% for item in regie_info.items %}
              <li>
                <a class="lingo_item" {% if item.source_url %}href="{{ item.source_url }}{% endif %}">
                {{ item.subject }}
              </a>
              <p class="lingo_item_price">
                {{ item.amount }} €
              </p>
              {% if item.user_cancellable %}
                <a class="lingo_cancelable pk-button" rel="popup" href="{% url 'lingo-cancel-item' pk=item.id %}">
                  {% trans 'Remove' %}
                </a>
              {% endif %}
              </li>
            {% endfor %}
            <li class="total_price_row">
              <strong>À payer : </strong><span class="total_price">{{ regie_info.total }} €</span>
            </li>
          </ul>
          <input id="pay" type="submit" value="{% trans "Pay" %}" />
          <a href="{{portal_url}}demarches" id="new-command" class="pk-button">
            Commander un autre document
          </a>
        </form>
      {% endfor %}
    {% endif %}
  </div>
{% endblock %}
