<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{.title}}{{ if .query.Set }} - Set: {{.query.Set}}{{end}}</title>
  <link rel="stylesheet" href="https://jenil.github.io/bulmaswatch/cosmo/bulmaswatch.min.css">
  <!-- <link rel="stylesheet" href="https://jenil.github.io/bulmaswatch/lumen/bulmaswatch.min.css"> -->
  <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"> -->

  <style>
    .cardpreview {
      position: relative;
      display: inline-block;
      border-bottom: 1px dotted black;
    }

    .cardpreview .cardpreviewtext {
      visibility: hidden;
      display: none;
      width: 300px;
      color: #fff;

      /* Position the cardpreview */
      position: absolute;
      z-index: 1;
    }

    .cardpreview:hover .cardpreviewtext {
      visibility: visible;
      display: inline-block;
    }

   @media only screen and (max-width: 900px) {
     .level-item {
       justify-content: unset
     }

      table#cards td,
      table#cards th {
         display: none;
      }

      table#cards th:nth-child(1),
      table#cards th:nth-child(2),
      table#cards th:nth-child(4),
      table#cards th:nth-child(5),
      table#cards th:nth-child(9) {
         display: revert;
      }

      table#cards td:nth-child(1),
      table#cards td:nth-child(2),
      table#cards td:nth-child(4),
      table#cards td:nth-child(5),
      table#cards td:nth-child(9) {
         display: revert;
      }
    }
  </style>
</head>

<body>

  <!-- Site Title -->
  <section class="hero is-black">
    <div class="hero-body">
      <p class="title">
        <a href="/">{{ .title }}</a>
      </p>
      <p class="subtitle">
        <i>Magic: The Gathering</i> Collection
      </p>
    </div>
  </section>

  <!-- Nav Bar -->
  <section class="section">
    <nav class="level">

      <!-- Left side -->
      <div class="level-left">
        <div class="level-item">
          <div class="field">
            <label class="label">Set</label>
            <div class="control">
              <div class="select">
                <select name="set" id="set" form="searchform">
                  <option value="">-</option>
                  {{range .sets}}
                  <option value="{{ index . "code" }}">{{ printf "%.25s" (index . "_id") }} ({{ index . "count" }})
                  </option>
                  {{end}}
                </select>
              </div>
            </div>
          </div>
        </div>

        <div class="level-item">
          <div class="field">
            <label class="label">Name</label>
            <div class="control">
              <input form="searchform" name="name" class="input" id="name" type="text" placeholder="Tolarian Academy">
            </div>
          </div>
        </div>

        <input type="hidden" id="limit" name="limit" value="500" form="searchform">
        <input type="hidden" id="page" name="page" value="0" form="searchform">

        <div class="level-item">
          <div class="field">
            <label class="label">Sort</label>
            <div class="control">
              <div class="select">
                <select name="sort" id="sort" form="searchform">
                  <option value="name" selected>Name</option>
                  <option value="value">Value</option>
                  <option value="number">Collector Number</option>
                </select>
              </div>
            </div>
          </div>
        </div>

      </div>

      <!-- Right side -->
      <div class="level-right">
        <form action="/" id="searchform">
          <input class="button is-primary" type="submit" value="Search">
        </form>
      </div>
    </nav>

    <!-- Results Table -->
    <table id="cards" class="table is-fullwidth">
      <thead>
        <tr>
          <th><abbr title="Amount">#</abbr></th>
          <th>Name</th>
          <th>Type</th>
          <th><abbr title="Set Code">Set</abbr></th>
          <th><abbr title="Collector Number">C</abbr></th>
          <th><abbr title="Rarity">Rar</abbr></th>
          <th><abbr title="Price">$</abbr></th>
          <th><abbr title="Price Foil">$*</abbr></th>
          <th><abbr title="Price Eur">€</abbr></th>
          <th><abbr title="Price Eur Foil">€*</abbr></th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th><abbr title="Amount">#</abbr></th>
          <th>Name</th>
          <th>Type</th>
          <th><abbr title="Set Code">Set</abbr></th>
          <th><abbr title="Collector Number">C</abbr></th>
          <th><abbr title="Rarity">Rar</abbr></th>
          <th><abbr title="Price">$</abbr></th>
          <th><abbr title="Price Foil">$*</abbr></th>
          <th><abbr title="Price Eur">€</abbr></th>
          <th><abbr title="Price Eur Foil">€*</abbr></th>
        </tr>
      </tfoot>
      <tbody>
        {{range .cards}}
        <tr>
          <td>{{ add .SerraCount .SerraCountFoil }}</td>
          <td>
            <div class="cardpreview"><strong>{{.Name }}</strong>
              <span class="cardpreviewtext">
                <img loading="lazy" src="{{ .ImageUris.Normal }}" alt="" />
              </span>
            </div>
          </td>
          <td>{{.TypeLine}}</td>
          <td>{{.Set}}</td>
          <td>{{.CollectorNumber}}</td>
          <td>{{.Rarity}}</td>
          <td>{{.Prices.Usd}}</td>
          <td>{{.Prices.UsdFoil}}</td>
          <td>{{.Prices.Eur}}</td>
          <td>{{.Prices.EurFoil}}</td>
        </tr>
        {{end}}
      </tbody>
    </table>
  </section>

  {{ if ne .numPages 0 }}
  <div class="hero-body">
    <nav class="pagination" role="navigation" aria-label="pagination">

      {{ if ge .prevPage 0 }}
      <a href="/?set={{.query.Set}}&name={{.query.Name}}&sort={{.query.Sort}}&limit={{.limit}}&page={{.prevPage}}" class="pagination-previous">Previous</a>
      {{ end }}

      {{ if ( le .nextPage .numPages) }}
      <a href="/?set={{.query.Set}}&name={{.query.Name}}&sort={{.query.Sort}}&limit={{.limit}}&page={{.nextPage}}" class="pagination-next">Next page</a>
      {{ end }}

      <ul class="pagination-list">

        {{ if ne .page 0 }}
        <li>
          <a class="pagination-link" href="/?set={{.query.Set}}&name={{.query.Name}}&sort={{.query.Sort}}&limit={{.limit}}&page=0" aria-label="Goto page 0">0</a>
        </li>

        <li>
          <span class="pagination-ellipsis">&hellip;</span>
        </li>
        {{end}}

        {{ if gt .prevPage 0 }}
        <li>
          <a href="/?set={{.query.Set}}&name={{.query.Name}}&sort={{.query.Sort}}&limit={{.limit}}&page={{.prevPage}}" class="pagination-link" aria-label="Goto page {{.prevPage}}">{{.prevPage}}</a>
        </li>
        {{end}}
        <li>
          <a class="pagination-link is-current" href="/?set={{.query.Set}}&name={{.query.Name}}&sort={{.query.Sort}}&limit={{.limit}}&page={{.page}}" aria-label="Page {{ .page }}" aria-current="page">{{.page}}</a>
        </li>

        {{ if and (ne .nextPage .numPages) ( lt .nextPage .numPages) }}
        <li>
          <a href="/?set={{.query.Set}}&name={{.query.Name}}&sort={{.query.Sort}}&limit={{.limit}}&page={{.nextPage}}" class="pagination-link" aria-label="Goto page {{.nextPage}} ">{{.nextPage}}</a>
        </li>
        {{ end }}

        {{ if ne .numPages .page }}
        <li>
          <span class="pagination-ellipsis">&hellip;</span>
        </li>
        <li>
          <a class="pagination-link" href="/?set={{.query.Set}}&name={{.query.Name}}&sort={{.query.Sort}}&limit={{.limit}}&page={{.numPages}}" aria-label="Goto page {{.numPages}}">{{.numPages}}</a>
        </li>
        {{end}}

      </ul>
    </nav>
  </div>
  {{ end }}

  <!-- Select set from last search -->
  <script>
    function getParam(paramName) {
      return decodeURI(
        (RegExp(paramName + '=' + '(.+?)(&|$)').exec(location.search) || [, 500])[1]
      );
    }
    var selectedSetVal = getParam("set");
    document.getElementById("set").value = selectedSetVal;

    var selectedLimitVal = getParam("limit");
    document.getElementById("limit").value = selectedLimitVal;

    var selectedSortVal = getParam("sort");
    document.getElementById("sort").value = selectedSortVal;
  </script>

  <footer class="footer">
    <div class="content has-text-centered">
      <p>
        <strong><a href="https://github.com/noqqe/serra">Serra</a></strong> Version {{ .version }} by <a href="https://noqqe.de">noqqe</a>.
        <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
      </p>
    </div>
  </footer>

</body>

</html>
