{% extends "base.html" %}

{% block main %}

<div>
    <div class="flex flex-row flex-wrap py-4">
        <aside class="w-full sm:w-1/3 md:w-1/4 xl:w-1/6 px-2">
          
          <h3 class="ml-4 mb-2"><strong>Tables</strong></h3>
          <hr>
          {% for schema in schemas %}
            <details class="collapse collapse-arrow">
              <summary class="collapse-title pt-0 pb-1 min-h-0">{{ schema.name }}</summary>
              <div class="collapse-content">
                <ul>
                  {% for type, field in schema.fields %}
                    <li class="text-xs">{{ field }} <small>({{type}})</small></li>
                  {% endfor %}
                </ul>
              </div>
            </details>
          {% endfor %}
        </aside>

        <main id="main" role="main" class="w-full sm:w-2/3 md:w-3/4 xl:w-5/6 pt-1 px-2">
          <div>
            <form hx-target="#results" hx-params="sql" hx-get="/" hx-select="#results" hx-swap="outerHTML" hx-push-url="true">
              <textarea class="w-full h-32 p-2 border border-slate-300 rounded-md" placeholder="Enter your sql" id="sql" name="sql">{{ sql }}</textarea>
              <button class="btn btn-primary btn-sm btn-active" type="submit">Run</button>
            </form>
          </div>
          <div id="results">
          {% if error %}
            {{ error }}
          {% else %}
            <table class="table table-xs table-pin-rows">
              <thead>
                <tr>
                  {% for header in headers %}
                    <th>{{ header }}</th>
                  {% endfor %}
                </tr>
              </thead>
              <tbody>
                {% for row in rows %}
                <tr>
                  {% for cell in row %}
                  <td class="border border-slate-300 p-1">{{cell}}</td>
                  {% endfor %}
                </tr>
                {% endfor %}
              </tbody>
            </table>
          {% endif %}
          </div>
        </main>
    </div>
</div>




{% endblock main %}