{% extends "layouts/default.html" %}
{% block title %}{_ "Deck Builder" _}{% endblock %}
{% block content %}
<form name="search-form" id="search-form" method="post">
  {{ token | safe }}
</form>

<!-- Top most panel: base menu -->
<div class="field is-horizontal">
  <div class="field-body">
    {% include "builder/base-menu.html" %}
  </div>
</div>

<div id="advanced-search" class="field is-visible">
  <!-- Top Mid -->
  {% include "builder/_advanced_search_attrs.html" %}

  <!-- Second half: Numeric Inputs -->
  {% include "builder/_advanced_search_numeric.html" %}
</div>

<!-- Hidden Middle Panel: Deck Controls Menu -->
<div id="deck-controls" class="field is-visible">
  {% include "builder/deck-controls.html" %}
</div>

<!-- Bottom Panel: Card + Deck List -->
<div class="columns">
  <!-- Left Half: Deck List -->
  <div class="column is-two-thirds">

    <!--style="min-height:500px;height:500px;overflow-x:auto"-->
    <div id="current-deck-list"
         hx-get="/builder/current-deck-list"
         hx-trigger="load, current-deck-list-changed"
         hx-target="#current-deck-list">
      &nbsp;
    </div>
  </div>

  <!-- Right Half: Card List/Search Results/Pages -->
  <div class="column is-one-third">
    <div id="search-results">
    </div>
  </div>
</div>
{% endblock %}