<% if plugins.empty? %>
  <div class="uk-container uk-text-center">
    <h2>No Plugins Found</h2>
    <p>We could't find any plugins in the directory <code><%= Config.current.plugin_path %></code>.</p>
    <p>You can download official plugins from the <a href="https://github.com/hkalexling/mango-plugins">Mango plugins repository</a>.</p>
  </div>

<% else %>
  <h2 class=uk-title>Download with Plugins</h2>

  <div id="controls" class="uk-grid-small" uk-grid hidden>
    <div class="uk-width-3-4@m uk-child-width-1-1">
      <div class="uk-margin">
        <label class="uk-form-label" for="search-input">&nbsp;</label>
        <div class="uk-form-controls">
          <input id="search-input" class="uk-input" type="text" placeholder="<%= plugin.not_nil!.info.placeholder %>">
        </div>
      </div>
    </div>
    <div class="uk-width-expand">
      <div class="uk-margin">
        <label class="uk-form-label" for="plugin-select">Choose a plugin</label>
        <div class="uk-form-controls">
          <select id="plugin-select" class="uk-select">
            <% plugins.each do |p| %>
              <option value="<%= p[:id] %>"><%= p[:title] %></option>
            <% end %>
          </select>
        </div>
      </div>
    </div>
    <div class="uk-width-auto">
      <div class="uk-margin">
        <label class="uk-form-label" for="search-input">&nbsp;</label>
        <div class="uk-form-controls" style="padding-top: 10px;">
          <span uk-icon="info" uk-toggle="target: #toggle"></span>
        </div>
      </div>
    </div>
  </div>

  <dl class="uk-description-list" id="toggle" hidden>
    <% plugin.not_nil!.info.each do |k, v| %>
      <dt><%= k %></dt>
      <dd><%= v.to_s %></dd>
    <% end %>
  </dl>

  <div id="table" class="uk-margin-large-top" hidden>
    <h3 id="title-text"></h3>

    <div class="uk-margin">
      <button class="uk-button uk-button-default" onclick="selectAll()">Select All</button>
      <button class="uk-button uk-button-default" onclick="unselect()">Clear Selections</button>
      <button class="uk-button uk-button-primary" id="download-btn" onclick="download()">Download Selected</button>
      <div id="download-spinner" uk-spinner class="uk-margin-left" hidden></div>
    </div>
    <p class="uk-text-meta">Click on a table row to select the chapter. Drag your mouse over multiple rows to select them all. Hold Ctrl to make multiple non-adjacent selections.</p>
    <div class="uk-overflow-auto">
      <table class="uk-table uk-table-striped tablesorter">
      </table>
    </div>
  </div>
<% end %>


<% content_for "script" do %>
  <% if plugin %>
    <script>
      var pid = "<%= plugin.not_nil!.info.id %>";
    </script>
  <% end %>
  <%= render_component "jquery-ui" %>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.combined.min.js"></script>
  <script src="<%= base_url %>js/alert.js"></script>
  <script src="<%= base_url %>js/plugin-download.js"></script>
<% end %>
