{% extends 'base_templates/flask_extra_wide_base.html' %}

{% block content %}
<div class="monitorcontrols" id="monitorcontrols">
<h4>{{ word("Your status: ") }}
<button title="{{ word("Click to change your status to not available") }}" id="daAvailable" class="btn {{ config['BUTTON_STYLE'] }}primary">{{ word("Available for chat") }}</button>
<button title="{{ word("Click to change your status to available") }}" id="daNotAvailable" class="btn {{ config['BUTTON_STYLE'] }}danger">{{ word("Not available for chat") }}</button>
</h4>
<div class="row dainvisible" id="daPhoneInfo">
  <div class="col-lg-6">
    <div class="input-group" title="{{ word('Must be in E.164 format.  U.S. phone numbers begin with +1.') }}">
      <div class="input-group-prepend">
        <span class="input-group-text">{{ word("Your phone #") }}</span>
      </div>
      <input class="form-control" id="daPhoneNumber" placeholder="e.g., +12025551212">
      <div id="daPhoneError" class="input-group-append dainvisible">
        <span title="{{ word('The phone number is not in E.164 format (e.g. +12025551212)') }}" class="input-group-text bg-warning"><i class="fas fa-exclamation-triangle"></i></span>
      </div>
      <div id="daPhoneSaved" class="input-group-append dainvisible">
        <span class="input-group-text bg-success">{{ word('Saved') }}</span>
      </div>
    </div>
  </div>
</div>
<h4 class="mt-2">{{ word("You are available for the following roles: ") }}</h4>
<div class="form-group" id="monitorroles">
</div>
<h3>{{ word("Sessions") }}</h3>
<ul class="list-group" id="monitorsessions"></ul>
<p id="emptylist">{{ word("There are no active sessions.") }}</p>
<a href="#" style="display: none" id="chat-message-above" class="da-chat-notifier da-chat-notifier-above"></a>
<a href="#" style="display: none" id="chat-message-below" class="da-chat-notifier da-chat-notifier-below"></a>
{% endblock %}
