{% load is_empty from ext_theme_tags %}
{% comment "rst" %}
  Shared list base
  ================

  ``includes/crud/list.html``

  This is the shared template that is used to produce a consistent list view.
  All list views extend this common template, and so all list views share layout
  and  functionality.

  Template parameters
  -------------------

  .. describe:: objects

      This is the queryset instance that the list view will iterate over. Views
      use the context variable ``objects`` by default, but some of our views can
      also use custom context variables, like ``projects`` or ``project_objects``.

  .. describe:: skip_pagination

      **Boolean, default=False**. Skip pagination calls and links

  List top menu blocks
  --------------------

  .. describe:: view_binding

      This is used to apply a Knockout ``data-bind``, used when the list is
      JS/Knockout driven UI. This is the case for any list view that has dynamic
      user interactions for each list item.

      .. seealso:
          Views like the project list view and the project detail (or project
          version list view) show how this data binding would be configured.

  .. describe:: top_left_menu_items

      This is the block used to add list view filter elements to the top of the
      list.

  .. describe:: top_right_menu

      This is the parent element for where we will insert an "Add" button. You
      shouldn't need to alter this unless you are doing something different
      with this block.

      Contains ``top_right_menu_items``, which similarly doesn't normally require
      overriding, and the child ``create_button``, which is the most common to
      override

  .. describe:: top_right_menu_itmes

      Similar to ``top_right_menu``, this doesn't normaly require overriding. It
      might be used if you need multiple buttons on the top right of the list.

      You most likely want to override ``create_button``

  .. describe:: create_button

      This is the button that will usually link to a new page, or open a modal,
      to create a new object type for the object list -- ie, create a new webhook
      in the webhook list view.

{% endcomment %}

{% load trans blocktrans from i18n %}
{% load autopaginate paginate from pagination_tags %}

<div {% block view_binding %}{% endblock view_binding %}>
  {% block top_menu %}
    <div class="ui stackable text menu">
      {% block top_left_menu_items %}
      {% endblock top_left_menu_items %}

      {% block top_right_menu %}
        <div class="right menu">
          {% block top_right_menu_items %}
            <div class="item">
              {% block create_button %}
                {% comment %}
                  <button class="ui button">Add</button>
                {% endcomment %}
              {% endblock create_button %}
            </div>
          {% endblock top_right_menu_items %}
        </div>
      {% endblock top_right_menu %}
    </div>
  {% endblock top_menu %}

  {% comment %}
    We usually pass in a queryset here, but some views emit arrays of objects
    instead, so we support these as well. Therefore, the check here needs to be
    for an empty array or an empty queryset.

    We avoid using a simple `if not objects` check, as that would evaluate
    the queryset, which can cause a timeout if the queryset is very large,
    instead we use a custom template tag that call ``exists`` if the value is
    a queryset, or ``not value`` otherwise. See ``bool`` evaluation in:

    https://docs.djangoproject.com/en/4.2/ref/models/querysets/
  {% endcomment %}
  {% if objects|is_empty %}
    {% comment "rst" %}

      .. _api-template-list-placeholder:

      Placeholder blocks
      ------------------

      The placeholder section is visible if there are no instances in the ``objects``
      queryset. This would usually provide some onboarding level help, directing
      the user to docs or object creation.

      The placeholder block ultimately uses an `FUI placeholder segment`_.
      The placeholder can include an icon, heading, paragraph content,
      and should at least have a link out to documentation or a link to an admin page.

      This aims to replace a minimalist pattern of just a simple sentence: "No projects found", etc.

      .. _FUI placeholder segment: https://fomantic-ui.com/elements/segment.html#placeholder-segment

      .. describe:: list_placeholder

          Block to replace the whole placeholder content section. Useful if you
          want to do something custom, like a divider placeholder.

      .. describe:: list_placeholder_icon

          Override this if you want to remove the icon completely.

      .. describe:: list_placeholder_icon_class

          This is the most common to override, and just specifies the icon class
          name to use in the placeholder header.

      .. describe:: list_placeholder_header

          The header text to use in the placeholder

      .. describe:: list_placeholder_text

          The descriptive text to use in the placeholder, below the header

    {% endcomment %}
    <div class="{% block list_placeholder_class %}ui placeholder segment{% endblock list_placeholder_class %}">
      {% block list_placeholder %}
        <div class="ui icon header">
          {% block list_placeholder_icon %}
            <i class="{% block list_placeholder_icon_class %}{% endblock list_placeholder_icon_class %} icon"></i>
          {% endblock list_placeholder_icon %}
          {% block list_placeholder_header %}
            {# The filter should always be bound, but data might be `{}` #}
            {% if filter and filter.is_bound and filter.data %}
              {% block list_placeholder_header_filtered %}
                {# Filter is active and nothing was found #}
                {% trans "No results found" %}
              {% endblock list_placeholder_header_filtered %}
            {% else %}
              {% block list_placeholder_header_empty %}
                {# Filter is active and nothing was found #}
                {% trans "No objects created yet" %}
              {% endblock list_placeholder_header_empty %}
            {% endif %}
          {% endblock list_placeholder_header %}
        </div>
        {% block list_placeholder_text %}
          <div class="inline">
            {# The filter should always be bound, but data might be `{}` #}
            {% if filter and filter.is_bound and filter.data %}
              {% block list_placeholder_text_filtered %}
                {% trans "Try changing or removing your filter criteria" %}
              {% endblock list_placeholder_text_filtered %}
            {% else %}
              {% block list_placeholder_text_empty %}
              {% endblock list_placeholder_text_empty %}
            {% endif %}
          </div>
        {% endblock list_placeholder_text %}
      {% endblock list_placeholder %}
    </div>
  {% else %}
    {% comment "rst" %}
      Item list blocks
      ----------------

      The item list is where we iterate over each item in the ``objects``
      queryset. Each item is a "row" in this list, and is comprised of an initial
      row with the most important information, a second row with metadata and
      extra links, and a right floating menu for all of the actions that can be
      attributed to each list item. The right menu is always an icon menu.

      .. describe:: list

          You shouldn't need to override this, as this removes **all** child
          blocks.

      .. describe:: list_classes

          Also not common to override. The standard styles are used for all list
          views, but this is available if you need a custom style to the parent
          unordered list.

      .. describe:: list_item_start

          This is the opening tag for the list item. It can be used in some cases
          to either provide a Knockout binding to the list item, or perhaps
          customize the list item classes. Neither should be common.

      .. describe:: list_item

          The contents of the list item element. If you override this element,
          be sure to replicate all of the child structure here.

      .. describe:: list_item_right_column

          Block to override the entire contents of the right column. It should
          not be necessary to override this content, except in the case of a big
          edge case. Try overriding the column classes before you go this far.

      .. describe:: list_item_right_column_classes

          The classes applied to the right column. This column is where the list
          item button menu is located, and is normally right aligned and collapses
          down to a narrow column.

          Default: `right aligned collapsing`

      .. describe:: list_item_right_menu

          Contains the ``list_item_right_buttons``. You might need to override
          this if your buttons are custom actions instead of menus.

      .. describe:: list_item_right_buttons

          A list of ``<a class="ui icon button" />`` elements. Can also contain
          dropdown menus.

          .. seealso::
              The project version list view, for and example of including drop
              down menu buttons.

      .. describe:: list_item_image

          List item left image or icon. See ``list_item_icon`` for using a large
          icon on the left of the row, it's implemented as a child block here
          though.

          Empty this block out if you don't need an image/icon.

      .. describe:: list_item_icon

          Use an icon instead of an image. Technically, this still uses a false
          image, in order to avoid spacing/width issues with just icons.

      .. describe:: list_item_header

          The header text for the list item. This compromises the first row of
          the list view and should contain only the most important information.

          Default: a string representation of the instance, for debugging.

      .. describe:: list_item_header_classes

          The classes attached to the header element. Use this if you need to
          tweak the display of the header element, but not the structure.

          Default: `ui tiny header`

      .. describe:: list_item_header_column

          To override the whole table column/cell, you can use this block. This
          is here for very edge case usage, you shouldn't need to define the whole
          cell or deviate from a header inside a table cell.

      .. describe:: list_item_header_column_classes

          Instead of defining the whole column/cell, you might just need to define
          extra/different classes on the table cell. Try this before overriding
          the whole column block.

      .. describe:: list_item_description

          The list menu for the secondary/metadata row of information. Unless
          you are replacing the text menu, you probably want to override the
          ``list_item_meta`` block instead.

      .. describe:: list_item_meta

          A list of ``<div class="item" />`` elements. You probably want to
          overload ``list_item_meta_items`` though.

      .. describe:: list_item_meta_items

          ``.ui.list.item`` for the widest, middle column in the table. Useful for
          label instances, or a `.sub.header` element.

      .. describe:: list_item_extra

          For additional items, pushed right on the table. Useful for a singular
          secondary item, like a build, commit, or version, etc. Similar to the
          meta list, this is just the list, in case you want to replace it.

          See ``list_item_extra_items`` to add some items to the list.

      .. describe:: list_item_extra_items

          ``.ui.list.item`` for the right most column. Try to keep this to one
          item usually.

    {% endcomment %}
    {% block list %}
      <div class="ui vertically fitted segment">
        <table class="{% block list_classes %}ui very basic stacking table{% endblock list_classes %}">

          {% if not skip_pagination %}
            {% autopaginate objects 15 %}
          {% endif %}

          <tbody>
            {% for object in objects %}
              {# Item view for each object in objects queryset #}
              {% block list_item_start %}
                <tr class="middle aligned">
                {% endblock list_item_start %}
                {% block list_item %}

                  {% block list_item_header_column %}
                    <td class="{% block list_item_header_column_classes %}{% endblock list_item_header_column_classes %}">
                      <div class="{% block list_item_header_classes %}ui tiny truncating header{% endblock list_item_header_classes %}">
                        {% block list_item_image %}
                          {% comment %}
                          On the off chance you actually want an image here,
                          override this whole block. We use a fake image here to
                          avoid customizing CSS to avoid width/spacing issues.
                          {% endcomment %}
                          {# TODO consider making our own .ui.table .ui.icon.header styles #}
                          <span class="ui center aligned image">
                            {% block list_item_icon %}
                              {% comment %}
                              <i class="fas fa-folder icon"></i>
                              {% endcomment %}
                            {% endblock list_item_icon %}
                          </span>
                        {% endblock list_item_image %}
                        <div class="content">
                          {% block list_item_header %}
                            {{ object }}
                          {% endblock list_item_header %}
                        </div>
                      </div>
                    </td>
                  {% endblock list_item_header_column %}

                  {% block list_item_meta_column %}
                    <td>
                      {% block list_item_meta %}
                        <div class="ui relaxed stackable small middle aligned horizontal list">
                          {% block list_item_meta_items %}
                            {% comment %}
                            <div class="item">
                              <i class="fa-solid fa-code-branch icon"></i>
                              <code>{{ build.commit|truncatechars:8 }}</code>
                            </div>
                            {% endcomment %}
                          {% endblock list_item_meta_items %}
                        </div>
                      {% endblock list_item_meta %}
                    </td>
                  {% endblock list_item_meta_column %}

                  {% block list_item_extra_column %}
                    {% block list_item_extra %}
                      <td class="collapsing">
                        <div class="ui relaxed stackable small middle aligned horizontal list">
                          {% block list_item_extra_items %}
                          {% endblock list_item_extra_items %}
                        </div>
                      </td>
                    {% endblock list_item_extra %}
                  {% endblock list_item_extra_column %}

                  {% block list_item_right_column %}
                    <td class="{% block list_item_right_column_classes %}right aligned collapsing{% endblock list_item_right_column_classes %}">
                      {% block list_item_right_menu %}
                        <div class="ui small icon buttons">
                          {% block list_item_right_buttons %}
                            {% comment %}
                            <a class="ui button">
                              <i class="fa-solid fa-refresh icon"></i>
                            </a>
                            {% endcomment %}
                          {% endblock list_item_right_buttons %}
                        </div>
                      {% endblock list_item_right_menu %}
                    </td>
                  {% endblock list_item_right_column %}

                {% endblock list_item %}
              </tr>
            {% endfor %}

          </tbody>
        </table>
      </div>

      {% if not skip_pagination %}
        {% paginate using "includes/crud/pagination.html" %}
      {% endif %}

    {% endblock list %}
  {% endif %}
</div>