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

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

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

<div class="content">
  <div class="columns">
    <div class="column is-one-third">
      <div class="field">
        <div class="control is-expanded">
          <div class="select is-fullwidth">
            <select name="deck-load-id" id="deck-load-id"
                    onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
              <option value="">None</option>
              {% for deck in saved-deck-list %}
              <option value="/construct/{{ deck.id }}/view"{% if deck.id == id %} selected{% endif %}>
                {{ deck.id }} - {{ deck.name }}
              </option>
              {% endfor %}
            </select>
          </div>
        </div>
      </div>
    </div>

    <div class="column is-one-third">
      {% if id %}
      {% include "decks/saved-category-list.html" %}
      {% endif %}
    </div>

    <div class="column is-half">
      {% if id %}
        <label class="checkbox">
          <input type="checkbox" form="construct-form" name="sold" id="sold"{% if deck.sold %} checked="checked"{% endif %}>
          Deck Sold
        </label>

        </div>
      </div>
      {% endif %}
    </div>

  </div>

  {% if id %}
  <div class="field is-grouped">
    <div class="control">
      <a class="button"
         id="parent-button"
         href="/decks/{{ deck.ydk-deck-id }}/view">Based on deck {{ deck.ydk-deck.name }}</a>
    </div>

    <div class="control">
      <a class="button"
         id="parent-button"
         href="/construct/{{ deck.id }}/selected-sets">View Complete Deck Listing</a>
    </div>

  </div>

  <div class="field">
    <label class="label" for="name">Deck Name</label>
    <div class="control">
      <input class="input" name="name" id="name" value="{{ deck.name }}" form="construct-form">
    </div>
  </div>

  <div class="field">
    <label class="label" for="sell-price">Sell Price</label>
    <div class="control">
      <input class="input" name="sell-price" id="sell-price" value="{{ deck.sell-price }}" form="construct-form">
    </div>
  </div>

  <div class="field is-grouped">
    <div class="control">
      <button class="button" type="submit" form="construct-form">
        Submit
      </button>
    </div>

    <div class="control">
      <button class="button"
              hx-include="[name='construct-form']"
              hx-post="/construct/{{ deck.id }}/deconstruct">
        Deconstruct Deck
      </button>
    </div>
  </div>

  {% endif %}
</div>
{% endblock %}