<div class="modal full fade dark" id="shinobihub_viewer" role="dialog" aria-labelledby="shinobihub_viewerLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="shinobihub_viewerLabel">
            <i class="fa fa-home"></i> &nbsp; <%- lang['ShinobiHub'] %>
        </h4>
      </div>
      <div class="modal-body text-center" style="padding:0">
          <table  style="width:100%;table-layout: fixed;overflow-wrap: break-word;" class="mb-0 text-center table table-striped align-items-center">
            <thead class="bg-secondary">
                <tr>
                    <th scope="col" class="sort" data-sort="name">Name / Model</th>
                    <th scope="col" class="sort" data-sort="brand">Brand</th>
                    <th scope="col" class="sort" data-sort="description">Description</th>
                    <th scope="col" class="sort" data-sort="dateAdded">Date Added</th>
                    <th scope="col" class="sort" data-sort="dateUpdated">Date Updated</th>
                    <th scope="col" class="sort" data-sort="">Private</th>
                    <th scope="col" class="sort" data-sort="">&nbsp;</th>
                </tr>
            </thead>
            <tbody class="list text-left">
            </tbody>
          </table>
      </div>
      <div class="modal-footer">
          <div style="display:inline-block;vertical-align:top">
              <select id="shinobihub-explore" class="form-control form-control-sm mr-2" style="vertical-align:top;display:inline-block;width:150px;margin-right:2rem">
                  <option value="0" selected><%- lang['Uploaded Only'] %></option>
                  <option value="1"><%- lang['Public on ShinobiHub'] %></option>
              </select>
              <select id="shinobihub-sort-by" class="form-control form-control-sm mr-2" style="vertical-align:top;display:inline-block;width:150px;margin-right:2rem">
                  <option value="dateUpdated" selected><%- lang['Date Updated'] %></option>
                  <option value="dateAdded"><%- lang['Date Added'] %></option>
                  <option value="heading"><%- lang['Title'] %></option>
                  <option value="opening"><%- lang['Subtitle'] %></option>
              </select>
              <select id="shinobihub-sort-direction" class="form-control form-control-sm mr-2" style="vertical-align:top;display:inline-block;width:150px;margin-right:2rem">
                  <option value="DESC" selected><%- lang['Newest'] %></option>
                  <option value="ASC"><%- lang['Oldest'] %></option>
              </select>
              <input id="shinobihub-search" type="text" class="form-control" placeholder="<%- lang['Search'] %>" style="display:inline-block;margin-right:2rem;width:150px;">
              <div id="shinobihub-pages" style="display:inline-block;vertical-align:top"></div>
          </div>
      </div>
    </div>
  </div>
</div>
<script src="<%-window.libURL%>libs/js/dash2.shinobiHub.js"></script>
