{% extends "base.html" %}

{% block content %}
  <section class="section">
    <div class="container">
      <h1 class="title is-4">Translation Settings</h1>
      <p class="subtitle is-6">Configure translation bridges, routing direction, and inspect sync events.</p>

      <article class="box">
        <h2 class="title is-6">Translation Bridges</h2>
        <form method="post" style="margin-bottom: 0.75rem;" aria-label="Create translation bridge">
          {% csrf_token %}
          <input type="hidden" name="action" value="bridge_create">
          <div class="columns is-multiline">
            <div class="column is-2"><label class="label is-size-7" for="bridge_name">Name</label><input id="bridge_name" class="input is-small" name="name" placeholder="name"></div>
            <div class="column is-2"><label class="label is-size-7" for="bridge_quick_title">Quick Mode Hint</label><input id="bridge_quick_title" class="input is-small" name="quick_mode_title" placeholder="quick mode: en|es"></div>
            <div class="column is-2">
              <label class="label is-size-7" for="bridge_a_service">A Service</label>
              <div class="select is-small is-fullwidth"><select id="bridge_a_service" name="a_service">{% for value in channel_services %}<option value="{{ value }}">{{ value }}</option>{% endfor %}</select></div>
            </div>
            <div class="column is-2"><label class="label is-size-7" for="bridge_a_channel">A Channel</label><input id="bridge_a_channel" class="input is-small" name="a_channel_identifier" placeholder="A channel"></div>
            <div class="column is-1"><label class="label is-size-7" for="bridge_a_language">A Lang</label><input id="bridge_a_language" class="input is-small" name="a_language" value="en"></div>
            <div class="column is-2">
              <label class="label is-size-7" for="bridge_b_service">B Service</label>
              <div class="select is-small is-fullwidth"><select id="bridge_b_service" name="b_service">{% for value in channel_services %}<option value="{{ value }}">{{ value }}</option>{% endfor %}</select></div>
            </div>
            <div class="column is-2"><label class="label is-size-7" for="bridge_b_channel">B Channel</label><input id="bridge_b_channel" class="input is-small" name="b_channel_identifier" placeholder="B channel"></div>
            <div class="column is-1"><label class="label is-size-7" for="bridge_b_language">B Lang</label><input id="bridge_b_language" class="input is-small" name="b_language" value="es"></div>
            <div class="column is-2">
              <label class="label is-size-7" for="bridge_direction">Direction</label>
              <div class="select is-small is-fullwidth"><select id="bridge_direction" name="direction">{% for value in bridge_directions %}<option value="{{ value }}">{{ value }}</option>{% endfor %}</select></div>
            </div>
            <div class="column is-1"><button class="button is-link is-small" type="submit">Add</button></div>
          </div>
        </form>
        <table class="table is-fullwidth is-striped is-size-7">
          <caption>Configured translation bridges</caption>
          <thead>
            <tr><th scope="col">Name</th><th scope="col">A</th><th scope="col">B</th><th scope="col">Direction</th><th scope="col">Actions</th></tr>
          </thead>
          <tbody>
            {% for bridge in bridges %}
              <tr>
                <td>{{ bridge.name }}</td>
                <td>{{ bridge.a_service }} · {{ bridge.a_channel_identifier }} · {{ bridge.a_language }}</td>
                <td>{{ bridge.b_service }} · {{ bridge.b_channel_identifier }} · {{ bridge.b_language }}</td>
                <td>
                  {% if bridge.direction == "a_to_b" %}A to B
                  {% elif bridge.direction == "b_to_a" %}B to A
                  {% else %}Bidirectional
                  {% endif %}
                </td>
                <td>
                  <form method="post" aria-label="Delete translation bridge {{ bridge.name }}">
                    {% csrf_token %}
                    <input type="hidden" name="action" value="bridge_delete">
                    <input type="hidden" name="bridge_id" value="{{ bridge.id }}">
                    <button class="button is-danger is-light is-small" type="submit">Delete</button>
                  </form>
                </td>
              </tr>
            {% empty %}
              <tr><td colspan="5">No translation bridges configured.</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </article>

      <article class="box">
        <h2 class="title is-6">Translation Event Log</h2>
        <table class="table is-fullwidth is-striped is-size-7">
          <caption>Recent translation sync events</caption>
          <thead>
            <tr><th scope="col">Bridge</th><th scope="col">Status</th><th scope="col">Target</th><th scope="col">Error</th><th scope="col">At</th></tr>
          </thead>
          <tbody>
            {% for event in events %}
              <tr>
                <td>{{ event.bridge.name }}</td>
                <td>{{ event.status }}</td>
                <td>{{ event.target_service }} · {{ event.target_channel }}</td>
                <td>{{ event.error|default:"-" }}</td>
                <td>{{ event.created_at }}</td>
              </tr>
            {% empty %}
              <tr><td colspan="5">No events yet.</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </article>
    </div>
  </section>
{% endblock %}