{% extends "base.html" %}
{% from "partials/components.html" import select_field, feedback, empty_state, table_container with context %}

{% block title %}Currencies · CalMiner{% endblock %}

{% block content %}
<section class="panel" id="currencies-overview">
  <header class="panel-header">
    <div>
      <h2>Currency Overview</h2>
      <p class="chart-subtitle">
        Current availability of currencies for project inputs.
      </p>
    </div>
  </header>

  {% if currency_stats %}
  <div class="dashboard-metrics-grid">
    <article class="metric-card">
      <span class="metric-label">Total Currencies</span>
      <span class="metric-value" id="currency-metric-total">{{ currency_stats.total }}</span>
    </article>
    <article class="metric-card">
      <span class="metric-label">Active</span>
      <span class="metric-value" id="currency-metric-active">{{ currency_stats.active }}</span>
    </article>
    <article class="metric-card">
      <span class="metric-label">Inactive</span>
      <span class="metric-value" id="currency-metric-inactive">{{ currency_stats.inactive }}</span>
    </article>
  </div>
  {% else %} {{ empty_state("currencies-overview-empty", "No currency data
  available yet.") }} {% endif %} {% call table_container(
  "currencies-table-container", aria_label="Configured currencies",
  heading="Configured Currencies" ) %}
  <thead>
    <tr>
      <th scope="col">Code</th>
      <th scope="col">Name</th>
      <th scope="col">Symbol</th>
      <th scope="col">Status</th>
      <th scope="col">Actions</th>
    </tr>
  </thead>
  <tbody id="currencies-table-body"></tbody>
  {% endcall %} {{ empty_state( "currencies-table-empty", "No currencies
  configured yet.", hidden=currencies|length > 0 ) }}
</section>

<section
  class="panel"
  id="currencies-editor"
  data-default-code="{{ default_currency_code }}"
>
  <header class="panel-header">
    <div>
      <h2>Manage Currencies</h2>
      <p class="chart-subtitle">
        Create new currencies or update existing configurations inline.
      </p>
    </div>
  </header>

  {% set status_options = [ {"id": "true", "name": "Active"}, {"id": "false",
  "name": "Inactive"} ] %}

  <form id="currency-form" class="form-grid" novalidate>
    {{ select_field( "Currency to update (leave blank for new)",
    "currency-form-existing", name="existing_code", options=currencies,
    placeholder="Create a new currency", value_attr="code", label_attr="name" )
    }}

    <label for="currency-form-code">
      Currency code
      <input
        id="currency-form-code"
        name="code"
        type="text"
        maxlength="3"
        required
        autocomplete="off"
        placeholder="e.g. USD"
      />
    </label>

    <label for="currency-form-name">
      Currency name
      <input
        id="currency-form-name"
        name="name"
        type="text"
        maxlength="128"
        required
        autocomplete="off"
        placeholder="e.g. US Dollar"
      />
    </label>

    <label for="currency-form-symbol">
      Currency symbol (optional)
      <input
        id="currency-form-symbol"
        name="symbol"
        type="text"
        maxlength="8"
        autocomplete="off"
        placeholder="$"
      />
    </label>

    {{ select_field( "Status", "currency-form-status", name="is_active",
    options=status_options, include_blank=False ) }}

    <div class="button-row">
      <button type="submit" class="btn primary">Save Currency</button>
      <button type="button" class="btn" id="currency-form-reset">Reset</button>
    </div>
  </form>
  {{ feedback("currency-form-feedback") }}
</section>
{% endblock %} {% block scripts %} {{ super() }}
<script id="currencies-data" type="application/json">
  {{ {
    "currencies": currencies,
    "currency_stats": currency_stats,
    "default_currency_code": default_currency_code,
    "currency_api_base": currency_api_base
  } | tojson }}
</script>
<script src="/static/js/currencies.js"></script>
{% endblock %}