<!DOCTYPE html>
<html>
 <head>
    <title>OnionShare</title>
    <link href="data:image/x-icon;base64,{{favicon_b64}}" rel="icon" type="image/x-icon" />
    <style type="text/css">
    .clearfix:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
    }

    body {
      margin: 0;
      font-family: Helvetica;
    }

    header {
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      background: #fcfcfc;
      background: -webkit-linear-gradient(top, #fcfcfc 0%, #f2f2f2 100%);
      padding: 0.8rem;
    }

    header .logo {
      vertical-align: middle;
      width: 45px;
      height: 45px;
    }

    header h1 {
      display: inline-block;
      margin: 0 0 0 0.5rem;
      vertical-align: middle;
      font-weight: normal;
      font-size: 1.5rem;
      color: #666666;
    }

    header .right {
      float: right;
      font-size: .75rem;
    }

    header .right ul li {
      display: inline;
      margin: 0 0 0 .5rem;
      font-size: 1rem;
    }

    header .button {
      color: #ffffff;
      background-color: #4e064f;
      padding: 10px;
      border-radius: 5px;
      text-decoration: none;
      margin-left: 1rem;
      cursor: pointer;
    }

    table.file-list {
      width: 100%;
      margin: 0 auto;
      border-collapse: collapse;
    }

    table.file-list th {
      text-align: left;
      text-transform: uppercase;
      font-weight: normal;
      color: #666666;
      padding: 0.5rem;
    }

    table.file-list tr {
      border-bottom: 1px solid #e0e0e0;
    }

    table.file-list td {
      white-space: nowrap;
      padding: 0.5rem 10rem 0.5rem 0.8rem;
    }

    table.file-list td img {
      vertical-align: middle;
      margin-right: 0.5rem;
    }

    table.file-list td:last-child {
      width: 100%;
    }
    </style>
    <meta name="onionshare-filename" content="{{ filename }}">
    <meta name="onionshare-filesize" content="{{ filesize }}">
  </head>
  <body>

    <header class="clearfix">
        <div class="right">
            <ul>
                <li>Total size: <strong>{{ filesize_human }}</strong> (compressed)</li>
                <li><a class="button" href='/{{ slug }}/download'>Download Files</a></li>
            </ul>
        </div>
        <img class="logo" src="data:image/png;base64,{{logo_b64}}" title="OnionShare">
        <h1>OnionShare</h1>
    </header>

    <table class="file-list" id="file-list">
      <tr>
       <th onclick="sortTable(0)">Filename</th>
        <th onclick="sortTable(1)">Size</th>
        <th></th>
      </tr>
      {% for info in file_info.dirs %}
      <tr>
        <td>
          <img width="30" height="30" title="" alt="" src="data:image/png;base64,{{ folder_b64 }}" />
          {{ info.basename }}
        </td>
        <td>{{ info.size_human }}</td>
        <td></td>
      </tr>
      {% endfor %}
      {% for info in file_info.files %}
      <tr>
        <td>
          <img width="30" height="30" title="" alt="" src="data:image/png;base64,{{ file_b64 }}" />
          {{ info.basename }}
        </td>
        <td>{{ info.size_human }}</td>
        <td></td>
      </tr>
      {% endfor %}
    </table>
    <script>
      // Function to convert human-readable sizes back to bytes, for sorting
      function unhumanize(text) {
        var powers = {'b': 0, 'k': 1, 'm': 2, 'g': 3, 't': 4};
        var regex = /(\d+(?:\.\d+)?)\s?(B|K|M|G|T)?/i;
        var res = regex.exec(text);
        if(res[2] === undefined) {
          // Account for alphabetical words (file/dir names)
          return text;
        } else {
          return res[1] * Math.pow(1024, powers[res[2].toLowerCase()]);
        }
      }
      function sortTable(n) {
        var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
        table = document.getElementById("file-list");
        switching = true;
        // Set the sorting direction to ascending:
        dir = "asc";
        /* Make a loop that will continue until
          no switching has been done: */
        while (switching) {
          // Start by saying: no switching is done:
          switching = false;
          rows = table.getElementsByTagName("TR");
          /* Loop through all table rows (except the
            first, which contains table headers): */
          for (i = 1; i < (rows.length - 1); i++) {
            // Start by saying there should be no switching:
            shouldSwitch = false;
            /* Get the two elements you want to compare,
              one from current row and one from the next: */
            x = rows[i].getElementsByTagName("TD")[n];
            y = rows[i + 1].getElementsByTagName("TD")[n];
            /* Check if the two rows should switch place,
            based on the direction, asc or desc: */
            if (dir == "asc") {
                if (unhumanize(x.innerHTML.toLowerCase()) > unhumanize(y.innerHTML.toLowerCase())) {
                  // If so, mark as a switch and break the loop:
                  shouldSwitch= true;
                  break;
                }
            } else if (dir == "desc") {
              if (unhumanize(x.innerHTML.toLowerCase()) < unhumanize(y.innerHTML.toLowerCase())) {
                // If so, mark as a switch and break the loop:
                shouldSwitch= true;
                break;
              }
            }
          }
          if (shouldSwitch) {
            /* If a switch has been marked, make the switch
            and mark that a switch has been done: */
            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
            switching = true;
            // Each time a switch is done, increase this count by 1:
            switchcount ++;
          } else {
            /* If no switching has been done AND the direction is "asc",
            set the direction to "desc" and run the while loop again. */
            if (switchcount == 0 && dir == "asc") {
              dir = "desc";
              switching = true;
            }
          }
        }
      }
    </script>
  </body>
</html>
