WYGIWYH/app/templates/mini_tools/currency_converter/currency_converter.html

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

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

{% block content %}
  <div class="container px-md-3 py-3 column-gap-5"
       _="install init_tom_select
          install init_datepicker">
    <div class="tw-text-3xl fw-bold font-monospace tw-w-full mb-3">
      <div>{% translate 'Currency Converter' %}</div>
    </div>
    <div class="row">
      <div class="col-12 col-lg-5">
        <div>
          <input class="form-control form-control-lg 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="col text-primary tw-flex tw-items-center tw-justify-center my-3 my-lg-0">
        <i class="fa-solid fa-equals"></i>
      </div>
      <div class="col-12 col-lg-5">
        <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="form-control form-control-lg mb-3"
                 type="text"
                 name="to_value"
                 id="to_value"
                 disabled>
        </div>
        <div>{{ form.to_currency|as_crispy_field }}</div>
      </div>
    </div>
    <div class="row">
      <div class="tw-cursor-pointer text-primary text-end" 
           _="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>
  </div>
{% endblock %}