{% extends "base.j2" %}

{% block content %}
{{ breadcrumbs([{'text': 'sms'|lang}]) }}

<nav>
  <div class="nav nav-tabs" id="nav-tab">
    {% for modem in modems.keys() %}
      {% if selected_modem != modem %}<a href="/sms.cgi?id={{ modem }}" class="text-decoration-none">{% endif %}
      <button class="nav-link{% if modem == selected_modem %} active{% endif %}" type="button">{{ (modem|lang('modems'))['short'] }}</button>
      {% if selected_modem != modem %}</a>{% endif %}
    {% endfor %}
  </div>
</nav>

<h6 class="text-primary mt-4">{{ "sms_send_title"|lang }}</h6>

{% if is_sent %}
  <div class="alert alert-success" role="alert">
    {{ "sms_has_been_sent"|lang }}
  </div>
{% elif error %}
  <div class="alert alert-danger" role="alert">
    {{ error }}
  </div>
{% endif %}

<div>
  <form method="post" action="/sms.cgi">
    <input type="hidden" name="modem" value="{{ selected_modem }}">
    <div class="form-floating mb-3">
      <input type="text" name="phone" class="form-control" id="inputPhone" placeholder="+7911xxxyyzz">
      <label for="inputPhone">{{ "sms_phone"|lang }}</label>
    </div>
    <div class="form-floating">
      <textarea class="form-control" id="inputTA" name="text" placeholder="Hello world" style="height: 100px"></textarea>
      <label for="inputTA">{{ "sms_text"|lang }}</label>
    </div>
    <div class="mt-3">
      <button type="submit" class="btn btn-primary">{{ "sms_send"|lang }}</button>
    </div>
  </form>
</div>

<h6 class="text-primary mt-4">
  {{ "sms_latest"|lang }}
  {% if not is_outbox %}
    <b>{{ "sms_inbox"|lang }}</b> <span class="text-black-50">|</span> <a href="/sms.cgi?id={{ selected_modem }}&amp;outbox=1">{{ "sms_outbox"|lang }}</a>
  {% else %}
    <a href="/sms.cgi?id={{ selected_modem }}">{{ "sms_inbox"|lang }}</a> <span class="text-black-50">|</span> <b>{{ "sms_outbox"|lang }}</b>
  {% endif %}
</h6>

{% for m in messages %}
  <div class="mt-3">
    <b>{{ m.Phone }}</b> <span class="text-secondary">({{ m.Date }})</span><br/>
    {{ m.Content }}
  </div>
{% else %}
  <span class="text-secondary">{{ "sms_no_messages"|lang }}</span>
{% endfor %}

{% endblock %}