{% extends "base.j2" %}

{% block content %}
{{ breadcrumbs([{'text': 'SMS-сообщения'}]) }}

<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">{{ modems.getshortname(modem) }}</button>
      {% if selected_modem != modem %}</a>{% endif %}
    {% endfor %}
  </div>
</nav>

<h6 class="text-primary mt-4">Отправить SMS</h6>

{% if is_sent %}
  <div class="alert alert-success" role="alert">
    Сообщение отправлено.
  </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">Телефон</label>
    </div>
    <div class="form-floating">
      <textarea class="form-control" id="inputTA" name="text" placeholder="Hello world" style="height: 100px"></textarea>
      <label for="inputTA">Текст сообщения</label>
    </div>
    <div class="mt-3">
      <button type="submit" class="btn btn-primary">Отправить</button>
    </div>
  </form>
</div>

<h6 class="text-primary mt-4">
  Последние
  {% if not is_outbox %}
    <b>входящие</b> <span class="text-black-50">|</span> <a href="/sms.cgi?id={{ selected_modem }}&amp;outbox=1">исходящие</a>
  {% else %}
    <a href="/sms.cgi?id={{ selected_modem }}">входящие</a> <span class="text-black-50">|</span> <b>исходящие</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">Сообщений нет.</span>
{% endfor %}

{% endblock %}