<div id="import-protocol-modal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title" data-role="header-import"><%= t("protocols.import_export.import_modal.title_import") %></h4>
        <h4 class="modal-title" data-role="header-import-into-protocol"><%= t("protocols.import_export.import_modal.title_import_into_protocol") %></h4>
      </div>
      <div class="modal-body">
        <!-- Warning message -->
        <div data-role="import-message" style="margin-bottom: 15px;">
          <b><%= t("protocols.import_export.import_modal.import_into_protocol_message") %></b>
          <br />
        </div>

        <!-- General protocol info -->
        <div class="form-group">
          <label for="import_protocol_name"><%= t("protocols.import_export.import_modal.name_label") %></label>
          <input type="text" class="form-control" id="import_protocol_name">
        </div>
        <div class="form-group">
          <label for="protocol_authors">
            <span class="fas fa-user"></span>&nbsp;<%= t("protocols.import_export.import_modal.authors_label") %>
          </label>
          <input type="text" class="form-control" id="protocol_authors">
        </div>
        <div class="form-group">
          <label for="import_protocol_description"><%= t("protocols.import_export.import_modal.description_label") %></label>
          <div id="import_protocol_description" rows="2"></div>
        </div>
        <div class="form-group">
          <div class="row">
            <div class="col-xs-4">
              <label for="protocol_created_at"><%= t("protocols.import_export.import_modal.created_at_label") %></label>
              <input type="text" class="form-control" id="protocol_created_at" disabled>
            </div>
            <div class="col-xs-4">
              <label for="protocol_updated_at"><%= t("protocols.import_export.import_modal.updated_at_label") %></label>
              <input type="text" class="form-control" id="protocol_updated_at" disabled>
            </div>
          </div>
        </div>

        <!-- Preview title -->
        <div>
          <h2 style="display: inline;"><%= t("protocols.import_export.import_modal.preview_title") %></h2>
          <h3 style="display: none;" data-role="title-position"></h3>
        </div>

        <!-- Preview scroller -->
        <div>
          <div class="import-protocols-modal-preview-container" data-role="preview-container">
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <div data-role="multiple-protocols-buttons">
          <button type="button" class="btn btn-default" data-dismiss="modal"><%= t("general.cancel") %></button>
          <div class="btn-group" role="group">
            <a href="#" class="btn btn-default" data-action="jump-to-first-protocol"><i class="fas fa-fast-backward"></i></a>
            <a href="#" class="btn btn-default" data-action="jump-to-previous-protocol"><i class="fas fa-backward"></i></a>
            <a href="#" class="btn btn-default" data-action="jump-to-next-protocol"><i class="fas fa-forward"></i></a>
            <a href="#" class="btn btn-default" data-action="jump-to-last-protocol"><i class="fas fa-fast-forward"></i></a>
          </div>
          <div class="btn-group" role="group">
            <div data-role="import-all">
              <button type="submit" class="btn btn-success" data-action="import-current"><%= t("protocols.import_export.import_modal.import_current") %></button>
              <button type="submit" class="btn btn-success" data-action="import-all"><%= t("protocols.import_export.import_modal.import_all") %></button>
            </div>
            <div data-role="import-single">
              <button type="submit" class="btn btn-success" data-action="import-current"><%= t("protocols.import_export.import_modal.import") %></button>
            </div>
          </div>
        </div>
        <div data-role="single-protocol-buttons">
          <button type="button" class="btn btn-default" data-dismiss="modal"><%= t("general.cancel") %></button>
          <div class="btn-group" role="group">
            <button type="submit" class="btn btn-success" data-action="import-current"><%= t("protocols.import_export.import_modal.import") %></button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
