{% extends "base.html" %}
{% load static %}
{% load joinsep %}
{% block html_class %}gia-has-workspace-root{% endblock %}
{% block body_class %}gia-has-workspace{% endblock %}
{% block extra_head_assets %}
  {{ block.super }}
  <link rel="stylesheet" href="{% static 'css/gridstack.min.css' %}" integrity="sha512-ttQfsDTO64bamkJHeLDf0kzMP1NKfkootudPWS2V8Pwy+9z1wexSYjIT6/HXGg/bmtD+DRwsUnQoYEB0yePjbw==" crossorigin="anonymous">
  <script defer src="{% static 'js/gridstack-all.js' %}" integrity="sha512-djBPxwvBhDep1SvOhliatweHMORhVO3HabrfBjaW6nYsa7UcJYHty31x42m4HBSJXcJSQdoEgRPLVYGGIuIaDQ==" crossorigin="anonymous"></script>
  <script defer src="{% static 'js/workspace-shell.js' %}"></script>
{% endblock %}
{% block standard_page_shell %}{% endblock %}
{% block outer_content %}
  <section class="section gia-workspace-page">
    <div class="gia-workspace-shell">
      <div class="gia-workspace-main">
        <div class="gia-workspace-grid-column">
          <div class="grid-stack gia-workspace-grid" id="grid-stack-main">
          </div>
        </div>
        <aside
          id="gia-snap-assistant"
          class="panel gia-snap-assistant is-hidden"
          aria-label="Snap assistant">
          <p class="panel-heading gia-snap-assistant-heading">
            <span class="icon is-small"><i class="fa-solid fa-table-columns"></i></span>
            <span>Snap Right</span>
            <button
              type="button"
              class="delete is-small js-gia-snap-assistant-close"
              aria-label="Close snap assistant"></button>
          </p>
          <div class="panel-block">
            <div class="content is-small">
              <p>Choose a second window for the right side.</p>
            </div>
          </div>
          <div class="panel-block is-active gia-snap-assistant-body">
            <div
              id="gia-snap-assistant-options"
              class="buttons are-small gia-snap-assistant-options"></div>
          </div>
        </aside>
      </div>
      <nav
        id="gia-taskbar"
        class="tabs is-boxed is-small gia-workspace-tabs gia-taskbar is-hidden"
        aria-label="Open windows">
        <ul id="gia-taskbar-items">
        </ul>
      </nav>
    </div>
    <div id="gia-workspace-stash" class="is-hidden" aria-hidden="true"></div>
    <div>
      {% block load_widgets %}
        <!-- <div
          hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
          hx-get="#"
          hx-target="#widgets-here"
          hx-trigger="load"
          hx-swap="beforeend"
          style="display: none;"></div> -->
      {% endblock %}
    </div>
  </section>

{% endblock %}