<div id="top-bar">
  <h1 id="interlock_version">INTERLOCK <span></span>
  <h1>
    Password:
    <a id="add_password" href="">Add</a> -
    <a id="remove_password" href="">Remove</a> -
    <a id="change_password" href="">Change</a> |
    <a id="poweroff" href="">Poweroff</a> |
    <a id="logout" href="">Logout</a>
  </h1>
</div>

<div id="status">
  <h1>Application Logs</h1>
  <ul id="logs"></ul>

  <h1>Uploads</h1>
  <ul id="uploads"></ul>

  <h1>Current Activity</h1>
  <ul id="notifications"></ul>
  <ul id="dynamic_status"></ul>
</div>

<div id="file_manager">
  <form id="upload_form" action="/api/file/upload" method="POST" enctype="multipart/form-data">
    <fieldset>
      <div id="file_manager_mainView" class="entitydrag">
        <div class="actions">
          <ul>
            <li id="add_new_file">
              New file
            </li>
            <li id="add_new_directory">
              New directory
            </li>
            <li id="file_select_li">
              <label id="file_select_label" class="uploadLabel">
                <input type="file" id="fileselect" name="fileselect[]" multiple="multiple" />
                <span>Upload file</span>
              </label>
            </li>
            <li id="directory_select_li">
              <label id="directory_select_label" class="uploadLabel">
                <input type="file" id="directoryselect" name="directoryselect[]" multiple="multiple" directory webkitdirectory mozdirectory />
                <span>Upload directory</span>
              </label>
            </li>
            <li id="refresh">
              Refresh
            </li>

            <span class="float_right" >
              <li id="signal_registration" style="display: none">
                Signal registration
              </li>
              <li id="import_key">
                Import key
              </li>
              <li id="generate_key">
                Generate key
              </li>
            </span>
          </ul>
        </div>

        <span class="pwd"></span>

        <div id="inodes_table_container_main" class="inodes_table_container">
          <div id="inodes_selectable_container_main" class="inodes_selectable_container">
          <table id="inodes_table_main" class="inodes_table">
            <thead>
              <tr>
                <th>Name</th>
                <th>Size</th>
                <th>Last Modified</th>
              </tr>
            </thead>

            <tbody class="inodes_container"></tbody>
          </table>
          </div>
        </div>
      </div>

      <div id="disk_usage"><div>

      <!-- browsers do not support drag and drop -->
      <div id="submitbutton">
        <button type="submit">Upload Files</button>
      </div>
    </fieldset>
  </form>
</div>

<div id="file_manager_browsingView" style="display:none">
  <span class="pwd"></span>

  <div class="inodes_table_container">
    <table class="inodes_table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Size</th>
          <th>Last Modified</th>
        </tr>
      </thead>

      <tbody class="inodes_container"></tbody>
    </table>
  </div>
</div>

<!-- FIXME: cleanup the template from js using unobtrusive JavaScript -->
<script>
  $(document).ready(function() {
    Interlock.FileManager.init();
    /* ensure Interlock.Crypto.cipherList() is completed */
    $.when(Interlock.Crypto.cipherListCompleted).done(function () {
      Interlock.FileManager.fileList('mainView');

      $('#add_password').on('click', function(e) {
        e.preventDefault();
        var buttons = { 'Add Password': function() { Interlock.LUKS.addPwd({password: $('#password').val(), newpassword: $('#newpassword').val(), volume: $('#volume').val() }) } };
          var elements = [$(document.createElement('p')).text('Specify the LUKS volume, a valid password and a new password.'),
                          $(document.createElement('input')).attr('id', 'volume')
                                                            .attr('name', 'volume')
                                                            .attr('value', '')
                                                            .attr('type', 'text')
                                                            .attr('placeholder', 'volume')
                                                            .addClass('text ui-widget-content ui-corner-all'),
                          $(document.createElement('input')).attr('id', 'password')
                                                            .attr('name', 'password')
                                                            .attr('value', '')
                                                            .attr('type', 'password')
                                                            .attr('placeholder', 'password')
                                                            .addClass('text ui-widget-content ui-corner-all'),
                          $(document.createElement('input')).attr('id', 'newpassword')
                                                            .attr('name', 'newpassword')
                                                            .attr('value', '')
                                                            .attr('type', 'password')
                                                            .attr('placeholder', 'new password')
                                                            .addClass('text ui-widget-content ui-corner-all')];

          Interlock.UI.modalFormConfigure({ elements: elements, buttons: buttons,
            submitButton: 'Add Password', title: 'Add LUKS password' });
          Interlock.UI.modalFormDialog('open');
      });

      $('#remove_password').on('click', function(e) {
        e.preventDefault();
        var buttons = { 'Delete Password': function() { Interlock.LUKS.removePwd({password: $('#password').val(), volume: $('#volume').val() }) } };
          var elements = [$(document.createElement('p')).text('Specify the LUKS volume and the password to remove.'),
                          $(document.createElement('input')).attr('id', 'volume')
                                                            .attr('name', 'volume')
                                                            .attr('value', '')
                                                            .attr('type', 'text')
                                                            .attr('placeholder', 'volume')
                                                            .addClass('text ui-widget-content ui-corner-all'),
                          $(document.createElement('input')).attr('id', 'password')
                                                            .attr('name', 'password')
                                                            .attr('value', '')
                                                            .attr('type', 'password')
                                                            .attr('placeholder', 'password')
                                                            .addClass('text ui-widget-content ui-corner-all'),
                          $(document.createElement('p')).addClass('warning')
                                                        .text('WARNING: removing the last remaining passphrase ' +
                                                              'makes the LUKS encrypted container permanently inaccessible. This is a feature, not a bug.')];

          Interlock.UI.modalFormConfigure({ elements: elements, buttons: buttons,
            submitButton: 'Delete Password', title: 'Delete LUKS password' });
          Interlock.UI.modalFormDialog('open');
      });

      $('#change_password').on('click', function(e) {
        e.preventDefault();
        var buttons = { 'Change Password': function() { Interlock.LUKS.changePwd({password: $('#password').val(), newpassword: $('#newpassword').val(), volume: $('#volume').val() }) } };
          var elements = [$(document.createElement('p')).text('Specify the LUKS volume and the password to change.'),
                          $(document.createElement('input')).attr('id', 'volume')
                                                            .attr('name', 'volume')
                                                            .attr('value', '')
                                                            .attr('type', 'text')
                                                            .attr('placeholder', 'volume')
                                                            .addClass('text ui-widget-content ui-corner-all'),
                          $(document.createElement('input')).attr('id', 'password')
                                                            .attr('name', 'password')
                                                            .attr('value', '')
                                                            .attr('type', 'password')
                                                            .attr('placeholder', 'password')
                                                            .addClass('text ui-widget-content ui-corner-all'),
                          $(document.createElement('input')).attr('id', 'newpassword')
                                                            .attr('name', 'newpassword')
                                                            .attr('value', '')
                                                            .attr('type', 'password')
                                                            .attr('placeholder', 'new password')
                                                            .addClass('text ui-widget-content ui-corner-all')]

          Interlock.UI.modalFormConfigure({ elements: elements, buttons: buttons,
            submitButton: 'Change Password', title: 'Change LUKS password' });
          Interlock.UI.modalFormDialog('open');
      });

      $('#poweroff').on('click', function(e) {
        e.preventDefault();
        Interlock.Session.powerOff();
      });

      $('#logout').on('click', function(e) {
        e.preventDefault();
        Interlock.Session.logout();
      });
    });
  });
</script>
