<form autocomplete="off">
  <input type="hidden" name="layout" value="{{layout}}">
  <input type="hidden" name="contentLayout" value="{{contentLayout}}">

  <nav class="mm-mode-tabs">
    <button type="button" class="mm-mode-tab active"><i class="fas fa-newspaper"></i> Newspapers</button>
    <button type="button" class="mm-mode-tab" data-action="switchToWebsites"><i class="fas fa-globe"></i> Websites</button>
    <button type="button" class="mm-mode-close" data-action="closeEditor" title="Close (Esc)"><i class="fas fa-times"></i></button>
  </nav>

  {{!-- Background style picker --}}
  <div class="hqp-layout-picker">
    {{#each layouts}}
    <div class="hqp-layout-card {{#if (eq this.id ../layout)}}active{{/if}}" data-layout="{{this.id}}" data-action="selectLayout">
      <i class="{{this.icon}}"></i>
      <span>{{this.label}}</span>
    </div>
    {{/each}}
  </div>

  {{!-- Content layout picker --}}
  <div class="hqp-content-layout-picker">
    {{#each contentLayouts}}
    <div class="hqp-content-layout-card {{#if (eq this.id ../contentLayout)}}active{{/if}}" data-content-layout="{{this.id}}" data-action="selectContentLayout" title="{{this.label}}">
      <div class="hqp-layout-thumb" data-grid="{{this.grid}}"></div>
      <span>{{this.label}}</span>
    </div>
    {{/each}}
  </div>

  <div class="hqp-columns">

    {{!-- LIBRARY sidebar --}}
    <div class="hqp-col-library">
      <div class="hqp-lib-header">
        <span>Library</span>
        <button type="button" data-action="importCsv" class="hqp-lib-add" title="Import newspapers and websites from an AI-made CSV">
          <i class="fas fa-file-import"></i>
        </button>
        <button type="button" data-action="newNewspaper" class="hqp-lib-add" title="New Newspaper">
          <i class="fas fa-plus"></i>
        </button>
      </div>
      <div class="hqp-lib-list">
        {{#each library}}
        <div class="hqp-lib-entry {{#if (eq this.id ../selectedId)}}active{{/if}}" data-action="selectFromLibrary" data-newspaper-id="{{this.id}}">
          <i class="{{this.icon}} hqp-lib-icon"></i>
          <span class="hqp-lib-name">{{this.name}}</span>
          <button type="button" class="hqp-lib-del" data-action="deleteNewspaper" data-newspaper-id="{{this.id}}" title="Delete">
            <i class="fas fa-times"></i>
          </button>
        </div>
        {{/each}}
      </div>
    </div>

    {{!-- LEFT: Settings only --}}
    <div class="hqp-col-left hqp-news-settings">

      <div class="hqp-card hqp-card-fonts">
        <div class="hqp-card-header"><i class="fas fa-font"></i> <span class="hqp-fonts-label">Default Fonts</span></div>
        <div class="hqp-fonts-defaults">
          <div class="hqp-field">
            <label>Masthead</label>
            <select name="mastheadFont" class="hqp-font-select">
              {{#each fonts}}<option value="{{this}}" {{#if (eq this ../mastheadFont)}}selected{{/if}}>{{this}}</option>{{/each}}
            </select>
          </div>
          <div class="hqp-field">
            <label>Headlines</label>
            <select name="headlineFont" class="hqp-font-select">
              {{#each fonts}}<option value="{{this}}" {{#if (eq this ../headlineFont)}}selected{{/if}}>{{this}}</option>{{/each}}
            </select>
          </div>
          <div class="hqp-field">
            <label>Body</label>
            <select name="bodyFont" class="hqp-font-select">
              {{#each fonts}}<option value="{{this}}" {{#if (eq this ../bodyFont)}}selected{{/if}}>{{this}}</option>{{/each}}
            </select>
          </div>
          <div class="hqp-field">
            <label>Default Size (px)</label>
            <input type="number" name="defaultFontSize" value="{{defaultFontSize}}" min="6" max="72" step="1" style="width:70px;">
          </div>
        </div>
      </div>

      <div class="hqp-card">
        <div class="hqp-card-header"><i class="fas fa-palette"></i> Default Colors</div>
        <div class="hqp-field-row" style="gap: 10px;">
          <div class="hqp-field" style="flex:1;">
            <label>Ink</label>
            <input type="color" name="textColor" value="{{textColor}}">
          </div>
          <div class="hqp-field" style="flex:1;">
            <label>Accent</label>
            <input type="color" name="accentColor" value="{{accentColor}}">
          </div>
        </div>
      </div>

      <div class="hqp-card">
        <div class="hqp-card-header"><i class="fas fa-th-large"></i> Blocks</div>
        <div class="hqp-actions" style="flex-direction: column;">
          <button type="button" data-action="addBlock" class="hqp-btn hqp-btn-secondary">
            <i class="fas fa-plus"></i> Add Block
          </button>
          <button type="button" data-action="resetLayout" class="hqp-btn hqp-btn-secondary">
            <i class="fas fa-undo"></i> Reset Layout
          </button>
        </div>
      </div>

      <div class="hqp-card">
        <div class="hqp-card-header"><i class="fas fa-grip-lines"></i> Lines</div>
        <div class="hqp-line-source" data-action="dragLine">
          <div class="hqp-line-source-preview"></div>
          <span>Drag onto paper</span>
        </div>
      </div>

      <div class="hqp-card hqp-card-banner" {{#unless (eq layout "fantasy")}}style="display:none;"{{/unless}}>
        <div class="hqp-card-header"><i class="fas fa-scroll"></i> Banner</div>
        <div class="hqp-banner-source">
          <div class="hqp-banner-source-preview"></div>
          <span>Drag onto paper</span>
        </div>
      </div>

      <div class="hqp-card hqp-card-actions">
        <div class="hqp-field">
          <input type="text" name="saveName" value="{{saveName}}" placeholder="Save as...">
        </div>
        <div class="hqp-actions">
          <button type="button" data-action="saveNewspaper" class="hqp-btn hqp-btn-secondary">
            <i class="fas fa-save"></i> Save
          </button>
          <button type="button" data-action="previewNewspaper" class="hqp-btn hqp-btn-secondary">
            <i class="fas fa-eye"></i> Preview
          </button>
        </div>
        <button type="button" data-action="exportToItem" class="hqp-btn hqp-btn-secondary" style="width:100%;" title="Create this newspaper as an item in the Items directory">
          <i class="fas fa-suitcase"></i> Export to Items
        </button>
        <button type="button" data-action="showNewspaper" class="hqp-btn hqp-btn-primary" style="width:100%;">
          <i class="fas fa-paper-plane"></i> Show
        </button>
      </div>
    </div>

    {{!-- RIGHT: Interactive newspaper --}}
    <div class="hqp-col-right">
      <div class="hqp-card hqp-preview-card hqp-news-preview-card">
        <div class="hqp-card-header hqp-toolbar-area">
          <span class="hqp-toolbar-hint"><i class="fas fa-edit"></i> Click any text to edit</span>
          {{#if isFuturistic}}
          <div class="hqp-page-nav">
            <button type="button" data-action="pagePrev" class="hqp-page-btn"><i class="fas fa-chevron-left"></i></button>
            <span class="hqp-page-label">Page {{pageNum}} / {{pageCount}}</span>
            <button type="button" data-action="pageNext" class="hqp-page-btn"><i class="fas fa-chevron-right"></i></button>
            <button type="button" data-action="pageAdd" class="hqp-page-btn" title="Add page"><i class="fas fa-plus"></i></button>
            {{#if canDeletePage}}
            <button type="button" data-action="pageDelete" class="hqp-page-btn hqp-page-btn-del" title="Delete page"><i class="fas fa-trash"></i></button>
            {{/if}}
          </div>
          {{/if}}
        </div>
        <div class="hqp-news-preview-wrap">
          {{> "modules/media-maker/templates/newspaper-paper.hbs"}}
        </div>
      </div>
    </div>
  </div>
</form>
