{% extends "core/base.jinja" %}

{% block title %}
  {% trans %}Basket state{% endtrans %}
{% endblock %}

{% block additional_js %}
  <script type="module" src="{{ static('bundled/eboutic/checkout-index.ts') }}"></script>
{% endblock %}

{% block content %}
  <h3>{% trans %}Eboutic{% endtrans %}</h3>

  <script type="text/javascript">
    let billingInfos = {{ billing_infos|safe }};
  </script>

  <div x-data="etransaction(billingInfos, {{ basket.id }})">
    <p>{% trans %}Basket: {% endtrans %}</p>
    <table>
      <thead>
        <tr>
          <td>Article</td>
          <td>Quantity</td>
          <td>Unit price</td>
        </tr>
      </thead>
      <tbody>
        {% for item in basket.items.all() %}
          <tr>
            <td>{{ item.product_name }}</td>
            <td>{{ item.quantity }}</td>
            <td>{{ item.product_unit_price }} €</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>

    <p>
      <strong>{% trans %}Basket amount: {% endtrans %}{{ "%0.2f"|format(basket.total) }} €</strong>

      {% if customer_amount != None %}
        <br>
        {% trans %}Current account amount: {% endtrans %}
        <strong>{{ "%0.2f"|format(customer_amount) }} €</strong>

        {% if not basket.contains_refilling_item %}
          <br>
          {% trans %}Remaining account amount: {% endtrans %}
          <strong>{{ "%0.2f"|format(customer_amount|float - basket.total) }} €</strong>
        {% endif %}
      {% endif %}
    </p>
    <br>
    {% if settings.SITH_EBOUTIC_CB_ENABLED %}
      <div @htmx:after-request="fill">
        {{ billing_infos_form }}
      </div>
      <form
        method="post"
        action="{{ settings.SITH_EBOUTIC_ET_URL }}"
      >
        <template x-for="[key, value] in Object.entries(data)" :key="key">
          <input type="hidden" :name="key" :value="value">
        </template>
        <input
          x-cloak
          type="submit"
          id="bank-submit-button"
          :disabled="!isCbAvailable"
          class="btn btn-blue"
          value="{% trans %}Pay with credit card{% endtrans %}"
        />
      </form>
    {% endif %}
    {% if basket.contains_refilling_item %}
      <p>{% trans %}AE account payment disabled because your basket contains refilling items.{% endtrans %}</p>
    {% elif basket.total > user.account_balance %}
      <p>{% trans %}AE account payment disabled because you do not have enough money remaining.{% endtrans %}</p>
    {% else %}
      <form method="post" action="{{ url('eboutic:pay_with_sith', basket_id=basket.id) }}" name="sith-pay-form">
        {% csrf_token %}
        <input class="btn btn-blue" type="submit" value="{% trans %}Pay with Sith account{% endtrans %}"/>
      </form>
    {% endif %}
  </div>
{% endblock %}