{{ define "hist-page" }}
<div id="hist-page"
     x-data="{histcontrol: true, bancosselector: false, cajasselector: false, agentesselector: false }"
     >
  <div id="inst-selector">
    <div id="toogle-hist-control">
      <p x-text="histcontrol ? 'Ocultar Control e Instituciones' : 'Mostrar Control e Instituciones'"></p>
      <button
	id="toogle-hist-control-btn"
	@click="histcontrol = ! histcontrol"
	x-html="histcontrol ? '-' : '+'"
	x-bind:class="histcontrol ? 'opened' : 'closed'"
	>+</button>
    </div>
  <div id="inst-type-selector"  x-show="histcontrol" >
    <button
      x-ref="bancosselectbtn"
      class="select bancos"
      hx-get="/api/bancos/?format=html&res=list"
      hx-target="#response-div"
      hx-trigger="click delay:500ms"
      @click="
	      bancosselector = true;
	      cajasselector = false;
	      agentesselector = false;
	      $refs.bancosselectbtn.disabled = true;
	      $refs.cajasselectbtn.disabled = false;
	      $refs.agentesselectbtn.disabled = false;
	      "
      x-bind:class="bancosselector ? 'opened': ''"
      >Bancos</button>
    <button
      x-ref="cajasselectbtn"
      class="select cajas"
      hx-get="/api/cajas/?format=html&res=list"
      hx-target="#response-div"
      hx-trigger="click delay:500ms"
      @click="
	      bancosselector = false;
	      cajasselector = true;
	      agentesselector = false;
	      $refs.bancosselectbtn.disabled = false;
	      $refs.cajasselectbtn.disabled = true;
	      $refs.agentesselectbtn.disabled = false;
	      "
      x-bind:class="cajasselector ? 'opened': ''"
      >Cajas</button>
    <button
      x-ref="agentesselectbtn"
      class="select agentes"
      hx-get="/api/agentes/?format=html&res=list"
      hx-target="#response-div"
      hx-trigger="click delay:500ms"
      @click="
	      bancosselector = false;
	      cajasselector = false;
	      agentesselector = true;
	      $refs.bancosselectbtn.disabled = false;
	      $refs.cajasselectbtn.disabled = false;
	      $refs.agentesselectbtn.disabled = true;
	      "
      x-bind:class="agentesselector ? 'opened': ''"
      >Agentes</button>
  </div>
  <div id="response-div" x-show="histcontrol">
    
  </div>
  <div id="response-inst-card" x-show="open">
       <form x-ref="form"
	  x-bind:hx-post="urler"
	  hx-target="#response-inst-table-container"
	     >
	 <div
	   id="inst-selected">
	   <img
	     x-bind:style='instSelected === "banco vimenca" ? "background-color: #1789E1": ""'
	     x-bind:name="instSelected"
	     x-bind:src='instSelectedImage'
	     x-bind:hx-post="urler"
	     hx-trigger="load delay:500ms"
	     alt="bank logo" >
    </div>

       <fieldset>
      <div>
	<input id="inst-name-selector" hidden="true" name="name" x-bind:value="instSelected" required>
	<input id="inst-res-selector" hidden="true" name="res" value="table">
	<input id="inst-format-selector" hidden="true" name="format" value="html">
      </div>
      <div id="tf-container">
      <input  id="hours" type="radio" name="tf" value="hour" @change="e=>tf='hour'" >
      <label  for="hours">Horas</label>
      <input  id="days" type="radio" name="tf" value="day" @change="e=>tf='day'" required checked>
      <label for="days">Dias</label>
      <input id="weeks" type="radio" name="tf" value="week" @change="e=>tf='week'"  >
      <label for="weeks">Semanas</label>
      <input id="months" type="radio" name="tf" value="month" @change="e=>tf='month'" >
      <label for="months">Meses</label>
      </div>
      <div>
	<label id="time-amount-selector" for="amount">Cantidad <span id="ta-value" x-model="ta" required></span></label>
	<input x-bind:hx-post="urler" hx-trigger="change delay:1.5s" @change="e => ta = e.target.value" x-ref="ta" type="range" id="ta-amount" name="ta" min="1" max="12" list="markers" x-bind:value="ta">
	<datalist id="markers">
	  <option value="2"></option>
	  <option value="4"></option>
	  <option value="6"></option>
	  <option value="8"></option>
	  <option value="10"></option>
	  <option value="12"></option>
	</datalist>
	<input id="button-submit" type="submit" value="GO"> 
      </div>
      
       </fieldset>
    </form>
    <div>
     
    </div>
  </div>
</div>
<p x-text="queryRepr">Template</p>
<div
  id="response-inst-table-container">

</div>
<div id="response-table-graph">
  
</div>
</div>
{{ end }}

{{ define "compare-page" }}
<div id="compare-page" x-data="{comparerpage: true}">
  <div id="toogleinst">
    <p x-text="comparerpage ? 'Ocultar Instituciones' : 'Mostrar Instituciones'">Mostrar Instituciones</p>
    <button
      id="toogle-inst-btn"
      @click="comparerpage = !comparerpage"
      x-bind:class="comparerpage ? 'opened' : 'closed'"
      x-html="comparerpage ? '-' : '+'"
	    >+</button>
    </div>
  <div id="response-institution" hx-get="/api/all/?format=html&res=list" hx-trigger="load delay:1s" >
    
  </div>
</div>
{{ end }}