<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Next Book</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta property="og:title" content="Next Book" />
  <meta property="og:description" content="Suggestions for the next book to read from your Storygraph to-read pile" />


  <link rel="stylesheet" href="assets/css/normalize.css">
  <link rel="stylesheet" href="assets/css/skeleton.css">
  <style>
    header {
      text-align: center;
      padding: 2rem;
      background-color: #f9f9f9;
    }

    main {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      margin: 8px 16px;
    }

    .category {
      padding: 1rem;
      margin: 1rem;
      border: 1px solid #ccc;
      border-radius: 5px;
      background-color: #f9f9f9;

      display: grid;
      text-align: center;
      grid-template-columns: 1fr;
      grid-template-rows: 47px 250px auto 40px;

      grid-column: span 2;
    }

    .rating {
      font-weight: bold;
      padding: 6px;
    }

    .modal {
      display: none;
      position: absolute;
      top: 25%;
      left: 25%;
      height: 430px;
      width: 50%;
      border: 1px solid #ccc;
      border-radius: 5px;
      background-color: #f9f9f9;
      box-shadow: 2px 2px 2px #ccc;
      padding: 4px;
    }
    .modal.show {
      display: block;
    }
    .modal .books {
      display: flex;
      flex-direction: row;
      width: 100%;
      height: 400px;
      overflow-x: scroll;
    }
    .modal .books div {
      margin: 6px;
      display: flex;
      flex-direction: column;
    }

    main > .category:nth-of-type(1),
    main > .category:nth-of-type(2),
    main > .category:nth-of-type(3) {
      grid-column: span 4;
    }

    @media screen and (max-width: 768px) {
      main {
        grid-template-columns: repeat(1, 1fr);
      }

      main > .category:nth-of-type(1),
      main > .category:nth-of-type(2),
      main > .category:nth-of-type(3) {
        grid-column: span 2;
      }

      .modal .books {
        flex-direction: column;
      }
    }
  </style>
</head>
<body>
  <header>
    <h1>Next Book</h1>
    <p>Suggestions for the next book to read from your Storygraph to-read pile</p>
    {{ if .Refreshing }}
      <div>Refreshing recommendations...</div>
    {{ else if .LastUpdated }}
      <div>
        Last Update: {{ .LastUpdated }}
        <a href="/refresh">Refresh recommendations</a>
      </div>
    {{ end }}
  </header>
  {{ if index .Books "Fiction" }}
    <main>
      {{ $cat := "Fiction" }}
      {{ $book := index (index .Books $cat) 0 }}
      <div class="category">
        <h3>{{ $cat }}</h3>
        <a href="{{ $book.Link }}" target="_blank">
          <img src="{{ $book.Image }}" alt="{{ $book.Name }} cover" style="height: 250px;" />
        </a>
        <a href="{{ $book.Link }}" target="_blank">{{ $book.Name }}</a>
        <div class="rating">⭐ {{ $book.Rating }}</div>
        <div class="more-link"><a href="#">[ Show More ]</a></div>
        <div class="modal">
          <div><a href="#" class="close">[Close]</a></div>
          <div class="books">
            {{ range $i, $Book := (index .Books $cat) }}
              {{ if eq $i 0 }}
              {{ continue }}
              {{ end }}
              <div>
                <a href="{{ $Book.Link }}" target="_blank">
                  <img src="{{ $Book.Image }}" alt="{{ $Book.Name }} cover" style="height: 250px;" />
                </a>
                <a href="{{ $Book.Link }}" target="_blank">{{ $Book.Name }}</a>
                <div class="rating">⭐ {{ $Book.Rating }}</div>
              </div>
              {{ if eq $i 5 }}
              {{ break }}
              {{ end }}
            {{ end }}
          </div>
        </div>
      </div>

      {{ $cat := "Non-Fiction" }}
      {{ $book := index (index .Books $cat) 0 }}
      <div class="category">
        <h3>{{ $cat }}</h3>
        <a href="{{ $book.Link }}" target="_blank">
          <img src="{{ $book.Image }}" alt="{{ $book.Name }} cover" style="height: 250px;" />
        </a>
        <a href="{{ $book.Link }}" target="_blank">{{ $book.Name }}</a>
        <div class="rating">⭐ {{ $book.Rating }}</div>
        <div class="more-link"><a href="#">[ Show More ]</a></div>
        <div class="modal">
          <div><a href="#" class="close">[Close]</a></div>
          <div class="books">
            {{ range $i, $Book := (index .Books $cat) }}
              {{ if eq $i 0 }}
              {{ continue }}
              {{ end }}
              <div>
                <a href="{{ $Book.Link }}" target="_blank">
                  <img src="{{ $Book.Image }}" alt="{{ $Book.Name }} cover" style="height: 250px;" />
                </a>
                <a href="{{ $Book.Link }}" target="_blank">{{ $Book.Name }}</a>
                <div class="rating">⭐ {{ $Book.Rating }}</div>
              </div>
              {{ if eq $i 5 }}
              {{ break }}
              {{ end }}
            {{ end }}
          </div>
        </div>
      </div>

      {{ $cat := "Comics" }}
      {{ $book := index (index .Books $cat) 0 }}
      <div class="category">
        <h3>{{ $cat }}</h3>
        <a href="{{ $book.Link }}" target="_blank">
          <img src="{{ $book.Image }}" alt="{{ $book.Name }} cover" style="height: 250px;" />
        </a>
        <a href="{{ $book.Link }}" target="_blank">{{ $book.Name }}</a>
        <div class="rating">⭐ {{ $book.Rating }}</div>
        <div class="more-link"><a href="#">[ Show More ]</a></div>
        <div class="modal">
          <div><a href="#" class="close">[Close]</a></div>
          <div class="books">
            {{ range $i, $Book := (index .Books $cat) }}
              {{ if eq $i 0 }}
              {{ continue }}
              {{ end }}
              <div>
                <a href="{{ $Book.Link }}" target="_blank">
                  <img src="{{ $Book.Image }}" alt="{{ $Book.Name }} cover" style="height: 250px;" />
                </a>
                <a href="{{ $Book.Link }}" target="_blank">{{ $Book.Name }}</a>
                <div class="rating">⭐ {{ $Book.Rating }}</div>
              </div>
              {{ if eq $i 5 }}
              {{ break }}
              {{ end }}
            {{ end }}
          </div>
        </div>
      </div>

      {{ range $cat, $Books := .Books }}
      {{ if or (eq $cat "Fiction") (eq $cat "Non-Fiction") (eq $cat "Comics") }}
        {{ continue }}
      {{ end }}
        {{ $book := index $Books 0 }}
        <div class="category">
          <h3>{{ $cat }}</h3>
          <a href="{{ $book.Link }}" target="_blank">
            <img src="{{ $book.Image }}" alt="{{ $book.Name }} cover" style="height: 250px;" />
          </a>
          <a href="{{ $book.Link }}" target="_blank">{{ $book.Name }}</a>
          <div class="rating">⭐ {{ $book.Rating }}</div>
          <div class="more-link"><a href="#">[ Show More ]</a></div>
          <div class="modal">
            <div><a href="#" class="close">[Close]</a></div>
            <div class="books">
              {{ range $i, $Book := $Books }}
                {{ if eq $i 0 }}
                {{ continue }}
                {{ end }}
                <div>
                  <a href="{{ $Book.Link }}" target="_blank">
                    <img src="{{ $Book.Image }}" alt="{{ $Book.Name }} cover" style="height: 250px;" />
                  </a>
                  <a href="{{ $Book.Link }}" target="_blank">{{ $Book.Name }}</a>
                  <div class="rating">⭐ {{ $Book.Rating }}</div>
                </div>
                {{ if eq $i 5 }}
                {{ break }}
                {{ end }}
              {{ end }}
            </div>
          </div>
        </div>
      {{ end }}
    </main>
    <script>
      [...document.querySelectorAll('.more-link')].forEach(more => {
        const toggleModal = function(event) {
          event.preventDefault();
          more.parentElement.querySelector('.modal').classList.toggle('show');
        }

        more.parentElement.querySelector('.modal .close').addEventListener('click', toggleModal);
        more.querySelector('a').addEventListener('click', toggleModal);
      });
    </script>

  {{ else }}
    <div class="container" style="text-align: center;padding: 4rem;">
      <h2>Still loading book recommendations...</h2>
    </div>
  {{ end }}
</body>
</html>
