{{!-- Individual Tab Template --}}
<section class="tab listGraph {{tab.cssClass}}" data-tab="listGraph" data-group="primary">
  {{!-- Tab content here --}}
  <div class="listGraph-details">
    <table class="graph-table">
      <thead>
        <tr>
          <th class="graph-type-icon-col" data-tooltip="{{localize 'foundry-graph.List.Type'}}">
            <i class="fa-solid fa-diagram-project"></i>
          </th>
          <th>{{localize "foundry-graph.List.Name"}}</th>
          <th>{{localize "foundry-graph.List.Description"}}</th>
          <th style="width: 200px">{{localize "foundry-graph.List.Actions"}}</th>
        </tr>
      </thead>
      <tbody>
        {{#each graphs}}
        <tr data-graph-id="{{this.id}}">
          <td class="graph-type-icon"
            data-tooltip="<img src='{{this.typeIcon}}' style='width:96px;height:96px;object-fit:contain;display:block;margin:0 auto 4px;'><div style='text-align:center;'>{{this.typeName}}</div>"
            data-tooltip-class="fg-type-icon-tooltip">
            <img src="{{this.typeIcon}}" alt="{{this.typeName}}" />
          </td>
          <td style="color: {{ this.color }}">{{this.name}}</td>
          <td>{{this.desc}}</td>
          <td class="flexrow">
            <button type="button" class="icon fa-solid fa-pencil" data-tooltip="foundry-graph.tooltip.edit"
              data-action="graphEdit" data-id="{{this.id}}"></button>
            <button type="button" class="icon fa-light fa-hexagon-nodes-bolt"
              data-tooltip="foundry-graph.tooltip.openGraph" data-action="onOpenGraph" data-id="{{this.id}}"></button>
            <button type="button" class="icon fa-solid fa-trash" data-tooltip="foundry-graph.tooltip.delete"
              data-action="graphDelete" data-id="{{this.id}}"></button>
            <button type="button" class="icon fa-solid fa-tags" data-tooltip="foundry-graph.tooltip.manageRelations"
              data-action="graphRelations" data-id="{{this.id}}" {{#unless this.editRelationsEnabled}}disabled
              data-tooltip="foundry-graph.tooltip.manageRelationsDisabled" {{/unless}}></button>
            <button type="button" class="icon fa-solid fa-user-lock" data-tooltip="foundry-graph.tooltip.permissions"
              data-action="graphPerms" data-id="{{this.id}}"></button>
          </td>
        </tr>
        {{/each}}
      </tbody>
    </table>
  </div>
</section>