{% extends "layouts/default.html" %}
{% block title %}{_ "Deck List" _}{% endblock %}
{% block content %}

{% include "tabs-js.html" %}

<form id="deck-form" method="post" name="deck-form">
  {{ token | safe }}
</form>

{% include "decks/deck-menu-bar.html" %}

<div class="field is-horizontal">
  <div class="field-body">
    <div class="field is-grouped">
      <div id="deck-select" class="control is-expanded"
           hx-get="/decks/deck-select?id={{ id }}"
           hx-trigger="load"
           hx-target="#deck-select">
      </div>
      {% if id %}
      <div id="category-select" class="control"
           hx-get="/decks/category-select?deck-id={{ id }}&category-id={{ category.id }}"
           hx-trigger="load"
           hx-target="#category-select">
      </div>
      {% endif %}
    </div>
  </div>
</div>

{% if id %}
<div class="field is-grouped">
  <div class="control is-expanded">
    <input class="input"
           form="deck-form"
           id="name"
           name="name"
           placeholder="Deck Name"
           value="{{ name }}">
  </div>

  <div class="control">
    <button class="button is-primary"
            form="deck-form"
            type="submit">Rename</button>
  </div>
</div>

{% include "decks/deck-controls.html" %}

<hr>

<div class="container" id="results">
  <div class="tabs is-boxed is-fullwidth">
    <div class="container">
      <ul>
        <li class="tab is-active" onclick="openTab(event,'deck-html-listing')"><a>Deck Overview</a></li>
        <li class="tab" onclick="openTab(event,'deck-html-text-listing')"><a>Deck Three Column Text</a></li>
        <li class="tab" onclick="openTab(event,'deck-text-results')"><a>Deck Textarea</a></li>
        <li class="tab" onclick="openTab(event,'deck-text-results-brs')"><a>Deck Textarea LineBreaks</a></li>
        <li class="tab" onclick="openTab(event,'deck-image-listing')"><a>Deck Images</a></li>
      </ul>
    </div>
  </div>

  <!-- First HTML View: Same as CURRENT-DECK-LIST from Builder -->
  <div class="container content-tab" id="deck-html-listing"
       hx-get="/decks/{{ id }}/html-listing"
       hx-trigger="load"
       hx-swap="innerHTML">
  </div>

  <!-- Second HTML view: Three column layout -->
  <div class="container content-tab" id="deck-html-text-listing"
       style="display:none"
       hx-get="/decks/{{ id }}/html-text-listing"
       hx-trigger="load"
       hx-swap="innerHTML">
  </div>

  <!-- Third HTML view: textarea -->
  <div class="container content-tab" id="deck-text-results"
       style="display:none"
       hx-get="/decks/{{ id }}/text-listing"
       hx-trigger="load"
       hx-swap="innerHTML">
  </div>

  <!-- Fourth HTML view: textarea + brs -->
  <div class="container content-tab" id="deck-text-results-brs"
       style="display:none"
       hx-get="/decks/{{ id }}/text-listing-with-brs"
       hx-trigger="load"
       hx-swap="innerHTML">
  </div>

  <!-- Fifth HTML view: generated static images -->
  <div class="container content-tab" id="deck-image-listing"
       style="display:none"
       hx-get="/decks/{{ id }}/image-listing"
       hx-trigger="load"
       hx-swap="innerHTML">
  </div>
</div>
{% endif %}
{% endblock %}