{% extends "layouts/base.html" %}
{% load formats %}
{% load crispy_forms_filters %}
{% load crispy_forms_tags %}
{% load i18n %}

{% block title %}{% translate 'Currency Converter' %}{% endblock %}

{% block content %}
  <div class="container"
       _="install init_tom_select
          install init_datepicker">
    <div class="text-3xl font-bold font-mono w-full mb-3">
      <div>{% translate 'Currency Converter' %}</div>
    </div>
    <div class="grid lg:grid-cols-[2fr_auto_2fr] gap-4">
      <div>
        <div>
          <input class="input input-bordered input-lg w-full mb-3"
                 type="text"
                 value="1"
                 name="from_value"
                 id="from_value"
                 x-data
                 x-mask:dynamic="$money($input, '{% get_decimal_separator %}', '{% get_thousand_separator %}', '30')">
        </div>
        <div>{{ form.from_currency|as_crispy_field }}</div>
      </div>
      <div class="text-primary flex items-center justify-center my-3 lg:my-0">
        <i class="fa-solid fa-equals"></i>
      </div>
      <div>
        <div hx-get="{% url 'currency_converter_convert' %}"
             hx-trigger="input from:#from_value, input from:#id_from_currency, input from:#id_to_currency, updated"
             hx-include="#from_value, #id_from_currency, #id_to_currency"
             id="result">
          <input class="input input-bordered input-lg w-full mb-3"
                 type="text"
                 name="to_value"
                 id="to_value"
                 disabled>
        </div>
        <div>{{ form.to_currency|as_crispy_field }}</div>
      </div>
    </div>
    <div class="grid">
      <div class="cursor-pointer text-primary text-right"
           _="on click
                set from_value to #id_from_currency's value
                set to_value to #id_to_currency's value
                set #id_from_currency's value to to_value
                set #id_to_currency's value to from_value
                call #id_from_currency.tomselect.sync()
                call #id_to_currency.tomselect.sync()
                trigger updated on #result
              end">
        <i class="fa-solid fa-rotate me-2"></i><span>{% trans 'Invert' %}</span>
      </div>
    </div>
    <hr class="hr my-4">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      {% for currency, data in rate_map.items %}
        <div>
          <c-ui.info-card color="yellow" title="{{ currency }}">
            <div class="card-data-section">
              {% for rate_currency, rate in data.rates.items %}
                <div class="card-data-row">
                  <span class="card-data-label">{{ rate_currency }}</span>
                  <div class="card-data-values">
                    {% if rate.rate %}
                      <c-amount.display
                          :amount="rate.rate"
                          :prefix="rate.prefix"
                          :suffix="rate.suffix"
                          :decimal_places="rate.decimal_places"></c-amount.display>
                    {% else %}
                      <span class="font-semibold">-</span>
                    {% endif %}
                  </div>
                </div>
              {% endfor %}
            </div>
          </c-ui.info-card>
         </div>
       {% endfor %}
     </div>
  </div>
{% endblock %}