{% extends "base.html" %} {% block title %}Currency Pairings{% endblock %} {%
block content %}
<div class="container mt-4">
  <div class="row">
    <div class="col-md-12">
      <h2>Currency Pairings</h2>

      {% if message %}
      <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ message }}
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="alert"
          aria-label="Close"
        ></button>
      </div>
      {% endif %}

      <!-- Create Pairing Form -->
      <div class="card mb-4">
        <div class="card-header">
          <h5>Create New Pairing</h5>
        </div>
        <div class="card-body">
          <form method="post" action="/dashboard/config/pairs/create">
            <div class="row">
              <div class="col-md-4">
                <div class="mb-3">
                  <label for="base_asset" class="form-label">Base Asset</label>
                  <input
                    type="text"
                    class="form-control"
                    id="base_asset"
                    name="base_asset"
                    required
                  />
                </div>
              </div>
              <div class="col-md-4">
                <div class="mb-3">
                  <label for="quote_asset" class="form-label"
                    >Quote Asset</label
                  >
                  <input
                    type="text"
                    class="form-control"
                    id="quote_asset"
                    name="quote_asset"
                    required
                  />
                </div>
              </div>
              <div class="col-md-4">
                <div class="mb-3">
                  <label for="source" class="form-label">Source</label>
                  <input
                    type="text"
                    class="form-control"
                    id="source"
                    name="source"
                    placeholder="e.g., Kraken, Binance"
                  />
                </div>
              </div>
            </div>
            <div class="mb-3 form-check">
              <input
                type="checkbox"
                class="form-check-input"
                id="enabled"
                name="enabled"
                checked
              />
              <label class="form-check-label" for="enabled">Enabled</label>
            </div>
            <button type="submit" class="btn btn-primary">
              Create Pairing
            </button>
          </form>
        </div>
      </div>

      <!-- Existing Pairings Table -->
      <div class="card">
        <div class="card-header">
          <h5>Existing Pairings</h5>
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>Base Asset</th>
                  <th>Quote Asset</th>
                  <th>Enabled</th>
                  <th>Source</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                {% for pairing in pairings %}
                <tr>
                  <td>{{ pairing.base_asset }}</td>
                  <td>{{ pairing.quote_asset }}</td>
                  <td>
                    {% if pairing.enabled %}
                    <span class="badge bg-success">Yes</span>
                    {% else %}
                    <span class="badge bg-secondary">No</span>
                    {% endif %}
                  </td>
                  <td>{{ pairing.source or '—' }}</td>
                  <td>
                    <form
                      method="post"
                      action="/dashboard/config/pairs/delete"
                      style="display: inline"
                    >
                      <input
                        type="hidden"
                        name="base_asset"
                        value="{{ pairing.base_asset }}"
                      />
                      <input
                        type="hidden"
                        name="quote_asset"
                        value="{{ pairing.quote_asset }}"
                      />
                      <button
                        type="submit"
                        class="btn btn-sm btn-danger"
                        onclick="
                          return confirm(
                            'Are you sure you want to delete this pairing?',
                          );
                        "
                      >
                        Delete
                      </button>
                    </form>
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}