<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>{{ data['title'] }}</title>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link href="{{ url_for('static', filename='style.css') }}" rel="stylesheet">

  <style>
    nav.hidden {
      opacity: 0.0
    }

    nav:hover {
      opacity: 0.8
    }

    div.parent {
      position: relative;
    }

    div.menu {
      position: absolute;
      float: left;
      left: 0;
      right: 0;
      margin: auto;
    }

    .width60 {
      width: 60px;
    }

    .width40 {
      width: 40px;
    }

    /* For flash */
    .flashes {
      position: absolute;
      float: left;
    }

    @keyframes fade-out {
      from {
        opacity: 1;
      }

      to {
        opacity: 0;
      }
    }

    .fade-out {
      animation: fade-out 2s 1;
      animation-fill-mode: both;
    }
  </style>
</head>

<body onload="redraw()">

  <div id="data-container" start_from="{{ start_from }}" spread="{{ data['spread'] }}" r2l="{{ data['r2l'] }}"
    pagenum="{{ data['pagenum'] }}" number="{{ data['number'] }}">
  </div>

  <div class="parent">

    <!-- Flash error messages-->
    {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
    <ul class="flashes fade-out">
      {% for category, message in messages %}
      <li class="{{ category }}">{{ message }}</li>
      {% endfor %}
    </ul>
    {% endif %}
    {% endwith %}

    <div class="menu">
      <nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top hidden" id="navbar">
        <div class="container-fluid">

          <!-- 想定通り動いてないのでまた直す -->
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
            aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav flex-grow-1">

              <li class="nav-item nav-link">
                <a class="btn btn-secondary" href="{{ prev_url }}">
                  ↩Back
                </a>
              </li>

              <li class="nav-item nav-link">
                <a class="btn btn-secondary" role="button" href="{{ url_for('edit_metadata', number=data['number']) }}">
                  ✎
                </a>
              </li>

              <li class="nav-item nav-link d-flex">
                <input type="text" class="form-control width60 text-end" id="position" value="{{ start_from + 1 }}"
                  onChange="if(r2l){obspos=img_list.length-this.value;}else{obspos=this.value;} pagemove('both', pos=obspos); redraw();" />
                <div class="d-flex align-items-center ms-2">/ {{ data['pagenum'] | int }}</div>
              </li>

              <li class="nav-item nav-link d-flex flex-grow-1 align-items-center">
                <input type="range" class="form-range pagecontrol" min="0" max="{{ data['pagenum'] - 1 }}" step="1"
                  id="pagecontrol" value="0" onChange="pagemove('both', pos=this.value); redraw(); this.blur()" />
              </li>

              <li class="nav-item nav-link">
                <div class="dropdown">
                  <input type="checkbox" class="btn-check" id="highlight" autocomplete="off"
                    aria-label="on/off highlight" onClick="list_init(); redraw(); this.blur()" checked />
                  <label class="btn btn-outline-primary" for="highlight">🔍</label>

                  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split"
                    data-bs-toggle="dropdown" id="search_dropdown"
                    onfocus="document.getElementById('navbar').classList.remove('hidden')"
                    onblur="document.getElementById('navbar').classList.add('hidden')" aria-expanded="false"
                    data-bs-auto-close="outside">
                    <span class="visually-hidden">Toggle Dropdown</span>
                  </button>

                  <form class="dropdown-menu p-1">
                    <!-- Prevent implicit submission of the form -->
                    <button type="submit" disabled style="display: none" aria-hidden="true"></button>

                    <div class="mb-2">
                      <label for="search_query" class="form-label">Search query</label>
                      <input type="search" class="form-control" id="search_query" placeholder="input text"
                        value="{{ query }}" onfocus="document.getElementById('navbar').classList.remove('hidden')"
                        onblur="document.getElementById('navbar').classList.add('hidden')"
                        onchange="document.getElementById('search_apply').click()">
                    </div>

                    <div class="mb-2">
                      <button type="button" class="btn btn-primary" id="search_apply"
                        onclick="query=document.getElementById('search_query').value; list_init(); redraw(); this.blur()">🔍Page</button>
                    </div>

                    <div class="mb-2">
                      <button type="button" class="btn btn-primary" id="search_apply" href="{{ url_for('search') }}"
                        number="{{ data['number'] }}"
                        onclick="q=document.getElementById('search_query').value; n=this.getAttribute('number');
                      if(q){document.location = this.getAttribute('href') + '?query=' + q + '&number=' + n}">🔍Doc</button>
                    </div>
                  </form>
                </div>
              </li>

              <li class="nav-item nav-link">
                <input type="checkbox" class="btn-check" id="pageshift" autocomplete="off" aria-label="shift the page"
                  onClick="list_init(); redraw(); this.blur()" />
                <label class="btn btn-outline-primary" for="pageshift">➦</label>
              </li>

              <li class="nav-item nav-link">
                <input type="checkbox" class="btn-check" id="spread" autocomplete="off" aria-label="spreading the book"
                  onClick="list_init(); redraw(); this.blur()" {% if data['spread'] %} checked {% endif %} />
                <label class="btn btn-outline-info" for="spread">📖</label>
              </li>
              <li class="nav-item nav-link">
                <a class="btn btn-success" role="button" href="{{ url_for('raw',number=data['number']) }}">
                  ⇩DL
                </a>
              </li>
            </ul>
          </div>
        </div>
      </nav>

    </div>

    <canvas id="canvas" width="2040" height="1200" style="width:1020px; height:600px"></canvas>
  </div>

  <script src="{{ url_for('static', filename='viewer.js' )}}"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
    crossorigin="anonymous"></script>
</body>

</html>