<!-- Reusable three dots. -->
<svg class="d-none">
  <symbol id="icon-three-dots" viewBox="0 0 16 16" fill="currentColor">
  <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z">
  </path>
  </symbol>
</svg>
<style>
    table {
      border: thin solid var(--bs-border-color);
    }
    th {
      background-color: var(--bs-secondary-bg-subtle);
    }
    /* Tweak the table to show hide some element */
    tr:hover {
      background-color: rgba(0,0,0,0.1);
    }
    tr .hover-show {
      visibility: hidden;
    }
    tr:hover .hover-show {
      visibility: visible;
    }
    /* Colors for each status */
    .not_found {
      background-color: rgba(3, 169, 244, 0.75); /* blue */
    }
    .greater_version, .greater_revision {
      background-color: rgba(156, 39, 176, 0.75); /* purple */
    }
    .uptodate {
      background-color: rgba(76, 175, 80, 0.75); /* green */
    }
    .lesser_version {
      background-color: rgba(244, 67, 54, 0.75); /* red */
    }
    .lesser_revision {
      background-color: rgba(255, 235, 59, 0.75); /* yellow */
    }
    .not_provided {
      background-color: rgba(185, 13, 0, 0.75); /* dark red */
    }
    /* Make tooltip larger */
    .tooltip-inner {
      text-align: left;
      max-width: 38em;
    }
    /* Keep body color for link for better readability. */
    a {
      color: var(--bs-body-color);
    }
    /* Adjust permalink scroll position for fixed header */
    .permalink {
      scroll-margin-top: 60px;
    }
    /* Show icons on toggle package set */
    button.package-set::before {
      content: "\2610"; /* Ballot Box */
      margin-inline-end: 0.25em;
      font-size: 1.5em;
      line-height: 1.5;
      vertical-align: sub;
    }
    button.package-set.dt-button-active::before {
      content: "\2611"; /* Ballot Box with Check */
    }
    /* Dynamically create the depth */
    tr.duplicate {
      display: none;
    }
    table.show-package-set tr.duplicate {
      display: table-row;
    }
    .depth-marker {
      display: none;
    }
    table.show-package-set .depth-marker {
      display: inline;
    }
    {% for i in range(1,9) %}
    table.show-package-set td.depth{{ i }} {
      padding-left: {{ i }}em !important;
    }
    {% endfor %}
    /* Hide column ordering arrow */
    table.show-package-set .dt-column-order {
      display: none;
    }
</style>
<table id="packages-table"
       aria-describedby="mydesc"
       class="compact hover row-border order-column"
       style="width:100%"
       data-auto-width="true"
       data-column-defs='{{ [{"targets": [0, 1], "visible": False }] | tojson }}'
       data-fixed-header="true"
       data-layout='{{ {"topStart": ["search","info"], "topEnd": "buttons", "bottomStart": None} | tojson }}'
       data-language='{{ {"info": "", "infoEmpty": "", "infoFiltered": "_TOTAL_ matches (_MAX_ total)"} | tojson }}'
       data-order='[{"idx":1, "dir":"asc"}]'
       data-paging="false"
       data-responsive="true"
       data-searching="true"
       data-state-save="true">
  {# Set width of the first column with package-set's name #}
  <thead>
    <tr>
      <th>Packages Set Name</th>
      <th>Packages Set Order</th>
      <th>
        Packages
        <span class="badge bg-secondary"
              data-bs-toggle="tooltip"
              data-bs-placement="right"
              data-bs-title="Total number of derivative packages">{{ data | length }}</span>
      </th>
      {% for pair in dist_pairs %}
        <th data-type="string">
          {{ pair.dist }}
          <span class="badge bg-secondary"
                data-bs-toggle="tooltip"
                data-bs-placement="right"
                data-bs-title="Number of derivative packages">{{ data | map(attribute='dist') | selectattr(pair.dist, 'defined') | list | length }}</span>
          <br />
          (Parent: {{ pair.parent }})
        </th>
      {% endfor %}
    </tr>
  </thead>
  <tbody>
    {# This macro create the content of a single cell in the table. #}
    {% macro package_version_cell(dist_data) %}
      {% if dist_data %}
        {# Let combine all status for ordering. #}
        <td class="{{ dist_data.compare.code }}"
            data-order="{{ dist_data.compare.order }}{{ ('.%s' % (dist_data.arch.values() | map(attribute='compare') | max).order) if dist_data.arch else '' }}"
            data-search="{{ dist_data.source_ver }}">
          {# Derivative source version. #}
          {% set version_tooltip %}
            {{ dist_data.compare.description }}
            <br />
            {% if dist_data.source_ver_parent %}Parent Source Version: {{ dist_data.source_ver_parent }}{% endif %}
          {% endset %}
          <span data-bs-toggle="tooltip"
                data-bs-placement="bottom"
                data-bs-html="true"
                data-bs-title="{{ version_tooltip }}">
            {% if dist_data.vcs_browser %}
              <a href="{{ dist_data.vcs_browser }}" target="_blank">{{ dist_data.source_ver }}</a>
            {% else %}
              {{ dist_data.source_ver }}
            {% endif %}
          </span>
          {# Create badges for each arch with differences #}
          {% for arch, arch_info in dist_data.arch|dictsort %}
            {% set badge_tooltip %}
              {{ arch_info.compare.description }}
              <br />
              {% for pkg_info in arch_info.packages | sort(attribute='name') %}
                {{ pkg_info.name }}: {{ pkg_info.version|d("Not Found") }} vs {{ pkg_info.version_parent|d("Not Found") }}
                <br />
              {% endfor %}
            {% endset %}
            <span class="badge {{ arch_info.compare.code }} text-body"
                  data-bs-toggle="tooltip"
                  data-bs-placement="bottom"
                  data-bs-html="true"
                  data-bs-title="{{ badge_tooltip }}">{{ arch }}</span>
          {% endfor -%}
        </td>
      {% else %}
        <td data-order="9" data-search="">-</td>
      {% endif %}
    {% endmacro %}
    {# This macro create all cell in the row. #}
    {% macro package_row(source_pkg) %}
      {% for dist in dist_pairs|map(attribute='dist') %}
        {% set dist_data = source_pkg.dist and source_pkg.dist.get(dist) %}
        {{ package_version_cell(dist_data) }}
      {% endfor %}
    {% endmacro %}
    {# Loop on each package to create the table. #}
    {% for source_pkg in data | sort(attribute='source_name') %}
      <tr class="hover-zone{% if source_pkg.duplicate %} duplicate{% endif %}">
        {# Display package-set for grouping and sorting. #}
        {% set package_set = source_pkg.package_set %}
        <td data-search="" data-order="{{ package_set.name|d("~") }}">
          <span id="{{ package_set.name }}_set" class="permalink">
            {{ package_set.name if package_set else 'No Package Set' }}
          </span>
          {# Package-set Link tree #}
          <span class="hover-show">
            <span class="badge bg-secondary"
                  id="dropdownMenuButton"
                  type="button"
                  data-bs-toggle="dropdown"
                  aria-expanded="false"
                  aria-label="More Options">
              <svg width="16" height="16">
                <use href="#icon-three-dots" />
              </svg>
            </span>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <li>
                <a class="dropdown-item" href="#{{ package_set.name }}_set">Permalink to this package set</a>
              </li>
            </ul>
          </span>
        </td>
        <td data-search="" data-order="{{ package_set.order|d(-1) }}">-</td>
        <td id="{{ source_pkg.source_name }}"
            data-order="{{ source_pkg.source_name }}"
            data-search="{{ source_pkg.source_name }}"
            class="permalink {{ ('depth%d' % package_set.depth) if package_set else '' }}">
          {% if package_set and package_set.depth %}<span class="depth-marker">&#x21B3;</span>{% endif %}
          {# Source Package Name - With a link to Debian Tracker or Download page if any. #}
          {% if source_pkg.tracker_url %}
            <a href="{{ source_pkg.tracker_url }}"
               title="Jump to Package Tracker"
               target="_blank">{{ source_pkg.source_name }}</a>
          {% elif source_pkg.download %}
            <a href="{{ source_pkg.download }}"
               title="Jump to Download Page"
               target="_blank">{{ source_pkg.source_name }}</a>
          {% else %}
            {{ source_pkg.source_name }}
          {% endif %}
          {# Package Link tree #}
          <span class="hover-show">
            <span class="badge bg-secondary"
                  id="dropdownMenuButton"
                  type="button"
                  data-bs-toggle="dropdown"
                  aria-expanded="false"
                  aria-label="More Options">
              <svg width="16" height="16">
                <use href="#icon-three-dots" />
              </svg>
            </span>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <li>
                <a class="dropdown-item" href="#{{ source_pkg.source_name }}">Permalink to this package</a>
              </li>
              <li>
                <a class="dropdown-item {% if not source_pkg.bugs_url %}disabled{% endif %}"
                   href="{{ source_pkg.bugs_url or '#' }}"
                   target="_blank">Parent bug reports ↗</a>
              </li>
              <li>
                <a class="dropdown-item {% if not source_pkg.homepage %}disabled{% endif %}"
                   href="{{ source_pkg.homepage or '#' }}"
                   target="_blank">Project's homepage ↗</a>
              </li>
              <li>
                <a class="dropdown-item {% if not source_pkg.vcs_browser %}disabled{% endif %}"
                   href="{{ source_pkg.vcs_browser or '#' }}"
                   target="_blank">View Source code ↗</a>
              </li>
            </ul>
          </span>
        </td>
        {{ package_row(source_pkg) }}
      </tr>
    {% endfor %}
  </tbody>
</table>
<script>
  const packageSetNameCol = 0;
  const packageSetOrderCol = 1;

  function togglePackageSet(isOn) {
    dt.button(0).active(isOn);
    dt.rowGroup().enable(isOn);
    if (isOn) {
      // Keep groups contiguous by fixing a primary sort on the grouping column
      dt.order.fixed({ pre: [[packageSetNameCol, 'asc'], [packageSetOrderCol, 'asc']] });
      dt.columns().orderable(false);
    } else {
      // Remove the fixed primary sort when ungrouping
      dt.order.fixed({ pre: [] });
      dt.columns().orderable(true);
    }
    $(dt.table().node()).toggleClass('show-package-set', isOn);

    dt.draw(false);
  }

  // Initialize the table with custom rowGroup configuration
  const dt = new DataTable('#packages-table', {
    rowGroup: {
      dataSrc: function (row) {
        return row[packageSetNameCol].display;
      },
      startRender: function (rows, group) {
        return group;
      }
    },
    buttons: [
      {
        text: 'Show Package Sets',
        className: 'btn btn-primary package-set',
        titleAttr: 'Enable/disable package set grouping',

        // Action toggles the button’s active state and then applies it
        action: function (e, dt, node) {
          const nowOn = !dt.button(0).active();
          togglePackageSet(nowOn);
        },
      }
    ]
  });
  // Set initial state
  var isOn = dt.rowGroup().enabled();
  togglePackageSet(isOn);

  // Initialize tooltip
  const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
  const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
</script>
