<!-- Crypto - Modal with processing & results from searching keyservers -->
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close button-info" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title">
        <span class="icon-key"></span>
        <span class="title">{{_("Find Encryption Keys")}}</span>
      </h4>
    </div>
    <div class="modal-body clearfix">
      <form id="form-search-keyservers" class="standard hide animated">{{ csrf_field|safe }}
        <label>{{_("Enter Name or Email Address")}} </label>
        <input type="text" name="query" value="" placeholder="name@email.org" tabindex="2">
        <button type="submit" class="button-primary"><span class="icon-search"></span> {{_("Search")}}</button>
      </form>
      <div id="search-keyservers-again" class="hide">
        <p class="message paragraph-important">
          <span class="icon-search"></span> {{_("Want to search for something else")}} <a href="#" id="btn-search-keyservers-again">{{_("click here")}}</a>
        </p>
      </div>
      <div id="search-keyservers" class="hide">
        <p class="message paragraph-important">
          <span class="icon-search"></span> {{_("Searching for encryption keys for")}}: <span class="color-01-gray-mid"><%= query %></span>
        </p>
        <p class="loading text-center half-bottom">
          {% include("../img/loading-ellipsis.svg") %}
        </p>
        <p class="progress" style="text-align: center;"></p>
        <ul class="result"></ul>
        <ul class="result-hidden-keys hide"></ul>
      </div>
    </div>
  </div>
</div>
