{{!-- Individual Tab Template --}}
<section class="tab creationGraph {{tab.cssClass}}" data-tab="creationGraph" data-group="primary">
  {{!-- Tab content here --}}
  <div class="creationGraph-details">
    <!-- form fields, etc. -->
    <div class="form-fields">
      <label for="graph-name">{{ localize 'foundry-graph.Labels.graphName' }}</label>
      <input class="droppable" data-drag="true" type="text" id="graph-name" value="{{ graph.name }}"
        data-id="{{ graph.name }}" data-action="onChangeGraphName" data-dtype="String" {{#if graph.id }} readonly="true"
        {{/if}} required="true">
    </div>
    <div class="form-fields">
      <label for="graph-id" hidden="true">{{ localize 'foundry-graph.Labels.graphId' }}</label>
      <input type="text" id="graph-id" value="{{ graph.id }}" data-id="{{ graph.id }}" data-dtype="String"
        readonly="true" hidden="true" />
    </div>
    <div class="form-fields">
      <label for="graph-desc">{{ localize 'foundry-graph.Labels.graphDesc' }}</label>

      <textarea id="graph-desc" rows="5" cols="45">{{graph.desc}}</textarea>
    </div>
    <div class="graph-select-wrapper">
      <label for="graph-type-select">Select Graph Type:</label>
      <select id="graph-type-select" name="graphId" {{#if graph.id}} disabled {{/if}}
        data-tooltip="foundry-graph.tooltip.selectGraphType">
        <option value="">--Please choose an option--</option>
        {{selectOptions graphTypes selected=selectedGraphType valueAttr="id" labelAttr="name"}}
        <!--
        {{#each graphTypes}}
        <option value="{{id}}" title="{{description}}" {{#if (eq id selectedGraphType)}}selected{{/if}}>{{name}}
        </option>
        {{/each}}
        -->
      </select>
    </div>
    <div class="graph-select-wrapper">
      <label for="graph-theme-select">Theme:</label>
      <select id="graph-theme-select" name="graphTheme" data-action="onThemeChange">
        {{#if selectedGraphThemes}}
        {{selectOptions selectedGraphThemes selected=selectedTheme valueAttr="id" labelAttr="label"}}
        {{else}}
        <option value="">Default</option>
        {{/if}}
      </select>
    </div>
    <div class="flexrow">
      <div class="form-fields">
        <label for="graph-width">Width (px):</label>
        <input type="number" id="graph-width" value="{{graph.background.width}}" min="100" {{#if
          graph.id}}readonly{{/if}} />
      </div>
      <div class="form-fields">
        <label for="graph-height">Height (px):</label>
        <input type="number" id="graph-height" value="{{graph.background.height}}" min="100" {{#if
          graph.id}}readonly{{/if}} />
      </div>
    </div>
    <label for="graph-background">Background Image:</label>
    <file-picker id="graph-background" name="graph-background" type="image" value="{{graph.background.image}} "
      data-tooltip="foundry-graph.tooltip.backgroundImage" data-action="onChangeGraphBackground">
      <span class="file-picker-label">Select Background Image</span>
      <span class="file-picker-value">{{graph.background.image}}</span>
    </file-picker>
    <span class="file-picker-info">Supported formats: PNG, JPG, GIF</span>
    <br>
    <div class="flexrow">
      <button id="create-graph-btn" type="button" data-action="onCreateGraph">
        <i class="fa-solid fa-square-pen"></i> Save Graph
      </button>
      <button id="cancel-graph-btn" type="button" data-action="onCancelCreate">
        <i class="fa-solid fa-ban"></i> Cancel
      </button>
    </div>
    {{!-- Import section --}}
    <div class="flexrow"
      style="margin-top: 0.75rem; border-top: 1px solid var(--color-border-dark, #aaa); padding-top: 0.75rem;">
      <button id="import-graph-btn" type="button" data-action="onImportGraph">
        <i class="fa-solid fa-file-import"></i> {{ localize 'foundry-graph.Labels.importGraph' }}
      </button>
      {{!-- Hidden file input, triggered programmatically --}}
      <input type="file" id="import-graph-file" accept=".json" style="display:none;" />
    </div>
  </div>
</section>