<!DOCTYPE html> <html>

<head>
  <meta charset="UTF-8">
  <title>{{ app.name }}</title>
  <style>
    :root {
      --dark-gray: #454545;
      --gray: #757575;
      --light-gray: #eeeeee;
      --off-white: #fcfcfc;
      --white: #ffffff;
      --red: #b30404;
      --light-red: #ecd7d7;
      --pale-red: #fbf9f9;
    }
    * { box-sizing: border-box }
    body {
      margin: 0;
      font-family: Roboto, sans-serif;
      line-height: 1.25;
      color: var(--red);
      background: var(--pale-red);
    }
    header {
      margin-bottom: 30px;
      padding: 15px;
      background: var(--off-white);
      border-bottom: 1px solid var(--light-gray);
    }
    h2 {
      margin: 0;
      font-size: 1.125em;
      color: var(--red);
      text-align: center;
    }
    main {
      height: calc(100vh - 195px);
      overflow-y: auto;
      overflow-x: hidden;
    }
    ul {
      margin: 0;
      padding-left: 0.5em ;
      list-style: none;
    }
    footer {
      margin-top: 30px;
      padding: 15px;
      color: var(--red);;
      font-size: 0.8em;
      text-align: center;
      background: var(--off-white);
      border-top: 1px solid var(--light-gray);
    }
    footer a { color: var(--red) }
    .toggles {
      margin-left: 30px;
      position: fixed;
    }
    .toggle-btn {
      margin: 8px 15px;
      padding: 8px 15px;
      font-size: 0.8em;
      cursor: pointer;
      border: 1px solid var(--light-red);
      border-radius: 15px 5px;
    }
    #toggle-collapse:after { content: 'Collapse All' }
    #toggle-collapse.collapsed:after { content: 'Expand All' }
    #toggle-json:after { content: 'View JSON' }
    #toggle-json.active:after { content: 'Hide JSON' }
    .container {
      max-width: 960px;
      width: calc(100% - 400px);
      margin: 0 auto;
    }
    .wrapper {
      width: calc(100% - 30px);
      height: calc(100vh - 200px);
      overflow: auto;
    }
    .entry {
      margin-bottom: 3px;
      padding: 10px 15px;
      background: var(--off-white);
      transition: all 0.5s;
    }
    .entry, .entry.togglable.collapsed {
      border: 1px solid var(--light-gray);
    }
    .entry.togglable {
      background: var(--white);
      border-color: var(--light-red);
    }
    .entry.togglable:hover .name { color: var(--red) }
    .deps {
      width: calc(100% - 25px);
      padding-top: 2px;
      color: var(--dark-gray);
      overflow: hidden;
    }
    .deps li {
      padding-left: 15px;
      border-left: 1px dotted var(--light-red);
    }
    .chevron {
      width: 25px;
      max-height: 20px;
      vertical-align: middle;
      text-align: center;
    }
    .hidden { display: none }
    .path { display: flex }
    .name { width: calc(100% - 25px); color: var(--gray) }
    .togglable .name { color: var(--red) }
    .togglable { cursor: pointer }
    .chevron:after { content: '\25B4'; font-size: 1.5em }
    .collapsed .name, .json { color: var(--gray) }
    .collapsed .deps { height: 0 }
    .collapsed .chevron:after { content: '\25BD'; font-size: 1em }
    .app-meta, .oss {
      display: inline-block;
      padding: 10px 15px;
    }
    .oss {
      width: 58px;
      border-left: 1px solid var(--light-red);
    }
    ::-webkit-scrollbar {
      width: 15px;
    }
    ::-webkit-scrollbar-track {
      background: #fbf9f9;
      box-shadow: inset 0 0 8px #eac8c8;
      border-radius: 8px;
    }
    ::-webkit-scrollbar-thumb {
      background: #bb1b1b;
      background-clip: content-box;
      border: 3px solid transparent;
      border-radius: 10px;
    }
  </style>
</head>
<body>
  <header>
    <h2>{{ data.path }}</h2>
  </header>
  <main>
    <aside class="toggles">
      <div id="toggle-collapse" class="toggle-btn"></div>
      <div id="toggle-json" class="toggle-btn"></div>
    </aside>
    <div class="wrapper">
    <div class="slabs container">
      {%- for entry in data.data -%}
        {% assign mtime = entry[1]['mtime'] -%}
        {% assign deps = entry[1]['deps'] -%}
        {%- if deps.size != 0 %}
        <div class="entry togglable">
          <div class="path" title="last modified at: {{ mtime }}; {{ deps.size }} dependencies">
            <div class="name">{{ entry[0] }}</div>
            <span class="chevron"></span>
          </div>
          <div class="deps">
            <ul>
            {%- for dependency in deps %}
              <li>{{ dependency }}</li>
            {%- endfor %}
            </ul>
          </div>
        </div>
        {%- else %}
        <div class="entry">
          <div class="path" title="last modified at: {{ mtime }}; no dependencies">
            <div class="name">{{ entry[0] }}</div>
          </div>
        </div>
        {%- endif -%}
      {%- endfor %}
    </div>
    <div class="json container hidden">
      <pre>{{ data.json }}</pre>
    </div>
    </div>
  </main>
  <footer>
    <div class="footer-contents">
      <div class="app-meta">
        <div>{{ app.name }}</div>
        <div>v{{ app.version }}</div>
      </div>
      <div class="oss">
        <a href="https://github.com/ashmaroli/jmv" title="Source code at GitHub">
          <svg viewBox="0 0 16 16">
            <path fill="currentcolor" d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/>
          </svg>
        </a>
      </div>
    </div>
  </footer>
  <script>
    const togglables = document.getElementsByClassName('togglable');
    const toggleClassName = 'collapsed';
    for (entry of togglables) {
      entry.addEventListener('click', function() {
        this.classList.toggle(toggleClassName);
      });
    }
    document.getElementById('toggle-collapse').addEventListener(
      'click', function() {
        this.classList.toggle(toggleClassName);
        if (this.classList.contains(toggleClassName)) {
          for (entry of togglables) { entry.classList.add(toggleClassName); }
        } else {
          for (entry of togglables) { entry.classList.remove(toggleClassName); }
        }
      }
    );
    document.getElementById('toggle-json').addEventListener(
      'click', function() {
        this.classList.toggle('active');
        document.getElementsByClassName('slabs')[0].classList.toggle('hidden');
        document.getElementsByClassName('json')[0].classList.toggle('hidden');
      }
    );
  </script>
</body>

</html>