{% extends "base/page.html" %}

{% block content %}
  <!-- Your content goes here -->
  <section>
    <button hx-post="/toots/download" hx-swap="innerHTML" hx-target="#toots" hx-include="#model-params" id="load_more_button" hx-indicator="#downloadspinner">Load More</button>
    <img src="/static/work-in-progress.gif" class="spinner" id="downloadspinner" /> 

    <form hx-post="/toots/train" hx-target="#toots" hx-swap="innerHTML" id="model-params" hx-indicator="#trainspinner">

      <div class="radio">
        <div>
          <input type="radio" id="desktop" name="link_style" value="desktop" {% if ui_settings.link_style == "desktop" or not ui_settings.link_style %}checked{% endif %}>
          <label for="desktop">Desktop</label>
        </div>
        <div>
          <input type="radio" id="ivory" name="link_style" value="ivory" {% if ui_settings.link_style == "ivory" %}checked{% endif %}>
          <label for="ivory">Ivory</label>
        </div>
        <div>
          <input type="radio" id="native" name="link_style" value="native" {% if ui_settings.link_style == "native" %}checked{% endif %}>
          <label for="native">Native</label>
        </div>
      </div>

      <div class="radio">
        <div>
          <input type="radio" id="6h" name="time_span" value="6h" {% if ui_settings.time_span == "6h" or not ui_settings.time_span %}checked{% endif %}>
          <label for="6h">6 Hours</label>
        </div>
        <div>
          <input type="radio" id="12h" name="time_span" value="12h" {% if ui_settings.time_span == "12h" %}checked{% endif %}>
          <label for="12h">12 Hours</label>
        </div>
        <div>
          <input type="radio" id="24h" name="time_span" value="24h" {% if ui_settings.time_span == "24h" %}checked{% endif %}>
          <label for="24h">Day</label>
        </div>
        <div>
          <input type="radio" id="1w" name="time_span" value="1w" {% if ui_settings.time_span == "1w" %}checked{% endif %}>
          <label for="1w">Week</label>
        </div>
      </div>

      <div class="model-param-label">
        Model Settings
        <div>
          <select name="algorithm" id="algorithm">
            {% for algo in algorithms %}
              <option 
                value="{{ algo.name }}" 
                {% if algo.name == selected_algorithm %}selected{% endif %}
                hx-get="/algorithm/{{ algo.name }}/form"
                hx-target="#algorithm-widgets"
                hx-swap="innerHTML"
              >{{ algo.display_name }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="model-params" id="algorithm-widgets">
          {% autoescape false %}
            {{ model_params }}
          {% endautoescape %}
        </div>

        <div class="row">
          <button type="submit">
            Re-Train Algorithm
          </button>
          <img src="/static/work-in-progress.gif" class="spinner" id="trainspinner" /> 
        </div>
      </div>

    </form>
  </section>
    
  <article id="toots">
    No Toots Yet.
  </article>
{% endblock %}
