<div class="dropdown is-right gia-split-dropdown" data-gia-dropdown>
  <div class="dropdown-trigger">
    <div class="buttons has-addons are-small mb-0">
      {% if show_widget_actions %}
        <button
          type="button"
          class="button is-light js-widget-spawn-trigger"
          data-widget-url="{{ default_widget_url }}"
          hx-get="{{ default_widget_url }}"
          hx-target="#widgets-here"
          hx-swap="beforeend">
          <span class="icon is-small"><i class="fa-solid fa-chart-line"></i></span>
          <span>{{ button_label|default:"Graphs" }}</span>
        </button>
      {% else %}
        <a class="button is-light" href="{{ default_page_url }}">
          <span class="icon is-small"><i class="fa-solid fa-chart-line"></i></span>
          <span>{{ button_label|default:"Graphs" }}</span>
        </a>
      {% endif %}
      <button
        type="button"
        class="button is-light js-gia-dropdown-toggle"
        aria-haspopup="true"
        aria-expanded="false">
        <span class="icon is-small"><i class="fa-solid fa-angle-down"></i></span>
      </button>
    </div>
  </div>
  <div class="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a class="dropdown-item" href="{{ default_page_url }}">
        <span class="icon is-small"><i class="fa-solid fa-up-right-from-square"></i></span>
        <span>Page</span>
      </a>
      <hr class="dropdown-divider">
      <details class="gia-dropdown-nest">
        <summary class="dropdown-item">
          <span class="icon is-small"><i class="fa-solid fa-sliders"></i></span>
          <span>Custom Graph</span>
        </summary>
        <div class="gia-dropdown-nest-body">
          {% for group in graph_groups %}
            <p class="dropdown-item has-text-weight-semibold is-size-7 has-text-grey">
              {{ group.title }}
            </p>
            {% for item in group.items %}
              {% if show_widget_actions %}
                <button
                  type="button"
                  class="dropdown-item js-widget-spawn-trigger"
                  data-widget-url="{{ item.widget_url }}"
                  hx-get="{{ item.widget_url }}"
                  hx-target="#widgets-here"
                  hx-swap="beforeend">
                  <span class="icon is-small"><i class="{{ item.icon }}"></i></span>
                  <span>{{ item.title }}</span>
                </button>
              {% else %}
                <a class="dropdown-item" href="{{ item.page_url }}">
                  <span class="icon is-small"><i class="{{ item.icon }}"></i></span>
                  <span>{{ item.title }}</span>
                </a>
              {% endif %}
            {% endfor %}
          {% endfor %}
        </div>
      </details>
    </div>
  </div>
</div>
