<!DOCTYPE html>
<html lang="en">
<head>
  {% block head %}
    <title>{% block title %}{% endblock %} | Call Attendant</title>
  {% endblock %}
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="refresh" content="300">
  <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.png') }}">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="{{ url_for('static',filename='css/callattendant.css') }}">
  {% macro search_box() %}
    <input class="form-control mx-sm-3" type="search" name="search-text" id="input-search" placeholder="Phone number" aria-label="Search">
    <div class="btn-group">
      <button type="submit" class="btn btn-success my-2 my-sm-0" id="btn-search" name="search-type" value="phone-number">Search</button>
      <button type="button" class="btn btn-success my-2 my-sm-0 dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
        <span class="caret"></span>
      </button>
      <div class="dropdown-menu">
        <div class="dropdown-header">SEARCH TYPE</div>
        <a class="dropdown-item" id="menu-phone" href="#">Phone Search</a>
        <a class="dropdown-item" id="menu-name" href="#">Name Search</a>
      </div>
    </div>
  {% endmacro %}
  {% block stylesheet %}
  {% endblock %}
</head>
<body>
  <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
    <div class="container" >
      <a class="navbar-brand" href="https://thess.github.io/callattendant/">
        <span class="text-success">
          <svg width="32" height="32" viewBox="0 0 16 16" class="bi bi-telephone" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M3.925 1.745a.636.636 0 0 0-.951-.059l-.97.97c-.453.453-.62 1.095-.421 1.658A16.47 16.47 0 0 0 5.49 10.51a16.471 16.471 0 0 0 6.196 3.907c.563.198 1.205.032 1.658-.421l.97-.97a.636.636 0 0 0-.06-.951l-2.162-1.682a.636.636 0 0 0-.544-.115l-2.052.513a1.636 1.636 0 0 1-1.554-.43L5.64 8.058a1.636 1.636 0 0 1-.43-1.554l.513-2.052a.636.636 0 0 0-.115-.544L3.925 1.745zM2.267.98a1.636 1.636 0 0 1 2.448.153l1.681 2.162c.309.396.418.913.296 1.4l-.513 2.053a.636.636 0 0 0 .167.604L8.65 9.654a.636.636 0 0 0 .604.167l2.052-.513a1.636 1.636 0 0 1 1.401.296l2.162 1.681c.777.604.849 1.753.153 2.448l-.97.97c-.693.693-1.73.998-2.697.658a17.47 17.47 0 0 1-6.571-4.144A17.47 17.47 0 0 1 .639 4.646c-.34-.967-.035-2.004.658-2.698l.97-.969z"/>
          </svg>
        </span>
      </a>
      <a class="navbar-brand" href="/">
        Call Attendant
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav bd-navbar mr-auto">
          <li class="nav-item" id="calls">
            <a class="nav-link" href="/calls">Calls</a>
          </li>
          <li class="nav-item" id="permitted">
            <a class="nav-link" href="/callers/permitted">Permitted</a>
          </li>
          <li class="nav-item" id="blocked">
            <a class="nav-link" href="/callers/blocked">Blocked</a>
          </li>
           <li class="nav-item" id="regexlists">
            <a class="nav-link" href="/callers/regexlists">Regex Lists</a>
          </li>
         <li class="nav-item" id="messages">
            <a class="nav-link" href="/messages">Messages</a>
          </li>
        </ul>

        {% if active_nav_item == "dashboard" %}
        <form class="form-inline my-2 my-lg-0 mr-4" action="/calls" method="post">
          {{ search_box() }}
        </form>
        {% endif %}
        <ul class="navbar-nav mr-2">
          <li class="nav-item" id="settings">
            <a class="nav-link" href="/settings">
              <span>
                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-gear" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" d="M8.837 1.626c-.246-.835-1.428-.835-1.674 0l-.094.319A1.873 1.873 0 0 1 4.377 3.06l-.292-.16c-.764-.415-1.6.42-1.184 1.185l.159.292a1.873 1.873 0 0 1-1.115 2.692l-.319.094c-.835.246-.835 1.428 0 1.674l.319.094a1.873 1.873 0 0 1 1.115 2.693l-.16.291c-.415.764.42 1.6 1.185 1.184l.292-.159a1.873 1.873 0 0 1 2.692 1.116l.094.318c.246.835 1.428.835 1.674 0l.094-.319a1.873 1.873 0 0 1 2.693-1.115l.291.16c.764.415 1.6-.42 1.184-1.185l-.159-.291a1.873 1.873 0 0 1 1.116-2.693l.318-.094c.835-.246.835-1.428 0-1.674l-.319-.094a1.873 1.873 0 0 1-1.115-2.692l.16-.292c.415-.764-.42-1.6-1.185-1.184l-.291.159A1.873 1.873 0 0 1 8.93 1.945l-.094-.319zm-2.633-.283c.527-1.79 3.065-1.79 3.592 0l.094.319a.873.873 0 0 0 1.255.52l.292-.16c1.64-.892 3.434.901 2.54 2.541l-.159.292a.873.873 0 0 0 .52 1.255l.319.094c1.79.527 1.79 3.065 0 3.592l-.319.094a.873.873 0 0 0-.52 1.255l.16.292c.893 1.64-.902 3.434-2.541 2.54l-.292-.159a.873.873 0 0 0-1.255.52l-.094.319c-.527 1.79-3.065 1.79-3.592 0l-.094-.319a.873.873 0 0 0-1.255-.52l-.292.16c-1.64.893-3.433-.902-2.54-2.541l.159-.292a.873.873 0 0 0-.52-1.255l-.319-.094c-1.79-.527-1.79-3.065 0-3.592l.319-.094a.873.873 0 0 0 .52-1.255l-.16-.292c-.892-1.64.902-3.433 2.541-2.54l.292.159a.873.873 0 0 0 1.255-.52l.094-.319z"/>
                  <path fill-rule="evenodd" d="M8 5.754a2.246 2.246 0 1 0 0 4.492 2.246 2.246 0 0 0 0-4.492zM4.754 8a3.246 3.246 0 1 1 6.492 0 3.246 3.246 0 0 1-6.492 0z"/>
                </svg>
              </span>
            </a>
          </li>
         <li class="nav-item" id="help">
            <a class="nav-link" href="https://github.com/thess/callattendant/wiki/User-Guide" target="_blank">
              <span>
                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-question-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                  <path d="M5.25 6.033h1.32c0-.781.458-1.384 1.36-1.384.685 0 1.313.343 1.313 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.007.463h1.307v-.355c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.326 0-2.786.647-2.754 2.533zm1.562 5.516c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>
                </svg>
              </span>
            </a>
          </li>
         <li class="nav-item" id="about">
            <a class="nav-link" href="/about">
              <span>
                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-exclamation-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
                  <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z"/>
                </svg>
              </span>
            </a>
          </li>

        </ul>
      </div>
    </div>
    <div>
       <button id="permit-next-call-button" type="button" class="btn btn-primary">
           <span class="text">Permit Next Call{% if permit_next %} (ON){% endif %}</span>
       </button>
    </div>
  </nav>


  {% with messages = get_flashed_messages() %}
    {% if messages %}
      {% for message in messages %}
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
          {{ message }}
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      {% endfor %}
    {% endif %}
  {% endwith %}

  {% block content %}{% endblock %}

  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

{% block js %}{% endblock %}

  <script>
    // Set the search type
    $('#menu-name').on('click', function() {
      $('#btn-search').val('name')
      $('#input-search').attr('placeholder',"Enter Text")
    })
    $('#menu-phone').on('click', function() {
      $('#btn-search').val('phone')
      $('#input-search').attr('placeholder',"Phone Number")
    })



    // Highlight the nav-item in the navbar with the matching "active_nav_item" id
    $(document).ready( function () {
      {% if active_nav_item %}
        $('#{{ active_nav_item }}').addClass('active');
      {% endif %}
    });

    $('#permit-next-call-button').on('click', function (event) {
      $.get(" /callers/permitnextcall?toggle", "", function(data, status) {
        // Give the user some feedback
        $('#permit-next-call-button span').text(
          "Permit Next Call" + (data.charAt(0) === "1" ? " (ON)" : "" ));
        alert(data.substring(1));
      });
    });
  </script>
</body>
</html>
