<div class="modal-header">
  <button type="button"
    class="close"
      data-dismiss="modal"
      aria-label="Close"
      data-e2e="e2e-BT-protocolTemplates-importProtocolsIo-close">
      <i class="sn-icon sn-icon-close"></i>
    </button>
  <h4 class="modal-title" id="publish-results-modal-label" data-e2e="e2e-TX-protocolTemplates-importProtocolsIo-title">
    <%= t('protocols.index.protocolsio.title') %>
  </h4>
</div>
<div class="modal-body">
  <div class='protocolsio-container'>
    <div class='main-protocol-panel'>
      <div class="protocol-menu">
        <%= form_tag team_list_external_protocol_path(@current_team.id),
          method: :get,
          class: 'protocols-search-bar',
          remote: true do %>
          <%= hidden_field_tag 'protocol_source', 'protocolsio/v3' %>
          <%= hidden_field_tag 'page_id', 0, id: 'page-id' %>
          <div class='header'>
            <div class='protocols-search-bar-panel'>
              <div class='sci-input-container left-icon'>
                <input class='sci-input-field'
                      type='text'
                      name='key'
                      data-e2e='e2e-IF-protocolTemplates-importProtocolsIo-search'
                      placeholder="<%= t('protocols.index.protocolsio.search_bar_placeholder') %>" />
                <i class='sn-icon sn-icon-search'></i>
              </div>
            </div>

            <div class='protocol-sort'>
              <div class="dropdown sort-menu" title="<%= t("general.sort.title") %>">
                <button class="btn btn-light btn-black icon-btn" 
                        type="button" 
                        id="sortMenu" 
                        data-toggle="dropdown" 
                        aria-haspopup="true" 
                        aria-expanded="true"
                        data-e2e="e2e-DD-protocolTemplates-importProtocolsIo-sort">
                  <span><i class="sn-icon sn-icon-sort-down"></i></span>
                </button>
                <ul id="sortMenuDropdown" class="dropdown-menu sort-projects-menu dropdown-menu-right" aria-labelledby="sortMenu">
                  <% {atoz: :alpha_asc, ztoa: :alpha_desc, new: :newest, old: :oldest}.each do |name, value| %>
                    <li>
                      <input type='radio' name='sort_by' value='<%= value %>' <%= name == :new ? 'checked' : '' %> />
                      <label for="<%= value %>"><%= t("protocols.index.protocolsio.sort.#{name.to_s}_html") %></label>
                    </li>
                  <% end %>
                </ul>
              </div>
            </div>
          </div>
        <% end %>
        <div class='protocol-list-side-panel'>
          <div class='row empty-text' data-e2e="e2e-TX-protocolTemplates-importProtocolsIo-results-empty">
            <%= t('protocols.index.protocolsio.list_panel.empty_text') %>
          </div>

          <div class='list-wrapper perfect-scrollbar' data-e2e="e2e-CO-protocolTemplates-importProtocolsIo-results">
          </div>
        </div>
      </div>
      <div class='protocol-preview-panel'>
        <div class='empty-preview-panel'>

          <div class='row'>
            <div class='text-rows protocol-preview-text'
              data-e2e="e2e-TX-protocolTemplates-importProtocolsIo-previewEmpty-title">
              <%= t('protocols.index.protocolsio.preview_panel.empty_title') %>
            </div>
          </div>

          <div class='row'>
            <div class='text-separator' data-e2e="e2e-EL-protocolTemplates-importProtocolsIo-previewEmpty-separator">
              <hr>
            </div>
          </div>

          <div class='row'>
            <div class='text-rows protocol-preview-subtext'
              data-e2e="e2e-TX-protocolTemplates-importProtocolsIo-previewEmpty-subText">
              <%= t('protocols.index.protocolsio.preview_panel.empty_subtext') %>
            </div>
          </div>
          <div class='row-bottom'>
            <div class='text-rows protocol-preview-subtext'
              data-e2e="e2e-TX-protocolTemplates-importProtocolsIo-previewEmpty-poweredBy">
              <%= t('protocols.index.protocolsio.preview_panel.powered_by') %>
            </div>
          </div>
        </div>

        <div class='full-preview-panel' style='display: none;'>
          <div class='row preview-banner'>
            <div class='col-md-6 txt-holder' data-e2e="e2e-TX-protocolTemplates-importProtocolsIo-preview-title">
              <span>
                <b><%= t('protocols.index.protocolsio.preview_panel.banner_text') %></b>
              </span>
            </div>
            <div class='col-md-6 btn-holder'>
            </div>
          </div>
          <div class='preview-holder perfect-scrollbar' data-e2e="e2e-CO-protocolTemplates-importProtocolsIo-preview">
            <iframe scrolling="no" class='preview-iframe'></iframe>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="modal-footer">
  <button type="button"
    data-dismiss="modal"
    class="btn btn-secondary"
    data-e2e="e2e-BT-protocolTemplates-importProtocolsIo-cancel">
    <%=t('general.cancel') %>
  </button>
  <button type="button"
    class="btn btn-primary convert-protocol"
    disabled
    data-e2e="e2e-BT-protocolTemplates-importProtocolsIo-convert">
    <%= t('protocols.index.protocolsio.convert') %>
  </button>
</div>

