<form autocomplete="off">
  <nav class="mm-mode-tabs">
    <button type="button" class="mm-mode-tab" data-action="switchToNewspapers"><i class="fas fa-newspaper"></i> Newspapers</button>
    <button type="button" class="mm-mode-tab active"><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>

  {{#if site}}
  <div class="hqp-layout-picker mm-web-era-row">
    {{#each eras}}
    <div class="hqp-layout-card mm-web-era-card {{#if this.active}}active{{/if}} {{#unless this.available}}disabled{{/unless}}" {{#unless this.available}}title="Coming soon"{{/unless}}>
      <i class="{{this.icon}}"></i>
      <span>{{this.label}}{{#if this.hint}} <small>({{this.hint}})</small>{{/if}}</span>
      {{#unless this.available}}<span class="mm-web-soon">soon</span>{{/unless}}
    </div>
    {{/each}}
  </div>
  <div class="hqp-layout-picker mm-web-tpl-row">
    {{#each templates}}
    <div class="hqp-layout-card {{#if this.active}}active{{/if}}" data-action="applyLayout" data-template-id="{{this.id}}">
      <i class="{{this.icon}}"></i>
      <span>{{this.label}}</span>
    </div>
    {{/each}}
  </div>
  {{/if}}

  <div class="hqp-columns">

    {{!-- LIBRARY sidebar --}}
    <div class="hqp-col-library">
      <div class="hqp-lib-header">
        <span>Websites</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="newSite" class="hqp-lib-add" title="New Website">
          <i class="fas fa-plus"></i>
        </button>
      </div>
      <div class="hqp-lib-list">
        {{#each sites}}
        <div class="hqp-lib-entry {{#if this.active}}active{{/if}}" data-action="selectSite" data-site-id="{{this.id}}">
          <i class="fas fa-globe hqp-lib-icon"></i>
          <span class="hqp-lib-name">{{this.name}}</span>
          <span class="mm-web-pub-dot {{#if this.published}}on{{/if}}" title="{{#if this.published}}Published{{else}}Not published{{/if}}"></span>
          <button type="button" class="hqp-lib-del" data-action="deleteSite" data-site-id="{{this.id}}" title="Delete">
            <i class="fas fa-times"></i>
          </button>
        </div>
        {{else}}
        <div class="mm-web-empty">No websites yet.</div>
        {{/each}}
      </div>
    </div>

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

      <div class="hqp-card">
        <div class="hqp-card-header"><i class="fas fa-globe"></i> Site</div>
        <div class="hqp-field">
          <label>Name</label>
          <input type="text" name="siteName" value="{{site.name}}">
        </div>
        <div class="hqp-field">
          <label>Address</label>
          <input type="text" name="siteAddress" value="{{site.address}}">
        </div>
        <div class="hqp-field">
          <label class="mm-web-pub-label"><input type="checkbox" name="sitePublished" {{#if site.published}}checked{{/if}}> Published</label>
        </div>
      </div>

      <div class="hqp-card hqp-card-fonts mm-web-look">
        <div class="hqp-card-header"><i class="fas fa-palette"></i> <span class="hqp-fonts-label">Look</span></div>
        <div class="mm-web-look-fields">
          <div class="hqp-field">
            <label>Font</label>
            <select name="siteFont" class="hqp-font-select">
              <optgroup label="Classic Web">
                {{#each webFonts}}<option value="{{this}}">{{this}}</option>{{/each}}
              </optgroup>
              <optgroup label="Font Library">
                {{#each libFonts}}<option value="{{this}}">{{this}}</option>{{/each}}
              </optgroup>
            </select>
          </div>
          <div class="hqp-field-row" style="gap: 10px;">
            <div class="hqp-field" style="flex:1;">
              <label>Page</label>
              <input type="color" name="siteBg">
            </div>
            <div class="hqp-field" style="flex:1;">
              <label>Text</label>
              <input type="color" name="siteText">
            </div>
            <div class="hqp-field" style="flex:1;">
              <label>Links</label>
              <input type="color" name="siteLink">
            </div>
          </div>
          <div class="hqp-field">
            <label>Background</label>
            <div class="mm-web-inline">
              <select name="siteBgPattern">
                <option value="">Plain</option>
                <option value="stars">Starfield</option>
                <option value="checker">Checkerboard</option>
                <option value="stripes">Pinstripes</option>
                <option value="clouds">Clouds</option>
                <option value="stucco">Stucco</option>
                <option value="image">Tiled image</option>
              </select>
              <button type="button" data-action="pickBgLibrary" class="hqp-icon-btn" title="Tile a graphic from the library"><i class="fas fa-icons"></i></button>
              <button type="button" data-action="pickBgImage" class="hqp-icon-btn" title="Choose the tile image"><i class="fas fa-folder-open"></i></button>
            </div>
          </div>
          <div class="hqp-field">
            <label>Status bar text</label>
            <input type="text" name="siteStatusText" value="{{site.statusText}}" placeholder="Scrolls in the browser's status bar">
          </div>
          <div class="hqp-field">
            <label>Music on this page</label>
            <div class="mm-web-inline">
              <button type="button" data-action="pickMusic" class="hqp-btn hqp-btn-secondary" style="flex:1;"><i class="fas fa-music"></i> {{#if page.music}}Change{{else}}Pick...{{/if}}</button>
              {{#if page.music}}
              <button type="button" data-action="clearMusic" class="hqp-icon-btn" title="Remove music"><i class="fas fa-times"></i></button>
              {{/if}}
            </div>
          </div>
        </div>
      </div>

      <div class="hqp-card">
        <div class="hqp-card-header"><i class="fas fa-th-large"></i> Add Blocks</div>
        {{#each blockGroups}}
        <div class="mm-web-add-group">
          <div class="mm-web-add-group-label">{{this.label}}</div>
          <div class="mm-web-add-grid">
            {{#each this.types}}
            <button type="button" data-action="addBlock" data-type="{{this.type}}" class="hqp-btn hqp-btn-secondary">{{this.label}}</button>
            {{/each}}
          </div>
        </div>
        {{/each}}
      </div>

      <div class="hqp-card hqp-card-actions">
        <div class="hqp-actions">
          <button type="button" data-action="saveLibrary" class="hqp-btn hqp-btn-primary" style="width:100%;">
            <i class="fas fa-save"></i> Save{{#if dirty}} &#9679;{{/if}}
          </button>
        </div>
        {{#unless site.published}}
        <div class="mm-web-unpub-hint">Not published: only you can open it in game.</div>
        {{/unless}}
      </div>
    </div>

    {{!-- RIGHT: The page itself --}}
    <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">{{#if preview}}<i class="fas fa-eye"></i> Preview: everything works like in game{{else}}<i class="fas fa-edit"></i> Click any text to edit{{/if}}</span>
          <div class="hqp-page-nav">
            <button type="button" data-action="previewToggle" class="hqp-page-btn mm-web-prevtoggle {{#if preview}}on{{/if}}" title="{{#if preview}}Back to editing{{else}}Preview as players see it{{/if}}"><i class="fas {{#if preview}}fa-pen{{else}}fa-eye{{/if}}"></i></button>
            <button type="button" data-action="webPagePrev" class="hqp-page-btn" {{#unless hasPrev}}disabled{{/unless}}><i class="fas fa-chevron-left"></i></button>
            <input type="text" name="pageTitle" class="mm-web-page-title" value="{{page.title}}" title="Page title, used by page: links">
            <span class="hqp-page-label">{{pageIndex}} / {{pageCount}}</span>
            <button type="button" data-action="webPageNext" class="hqp-page-btn" {{#unless hasNext}}disabled{{/unless}}><i class="fas fa-chevron-right"></i></button>
            <button type="button" data-action="webPageAdd" class="hqp-page-btn" title="Add page"><i class="fas fa-plus"></i></button>
            <button type="button" data-action="webPageLock" class="hqp-page-btn mm-web-lock {{#if pageLocked}}on{{/if}}" title="{{#if pageLocked}}Password protected (click to change){{else}}Password protect this page{{/if}}"><i class="fas {{#if pageLocked}}fa-lock{{else}}fa-unlock{{/if}}"></i></button>
            {{#if canDeletePage}}
            <button type="button" data-action="webPageDelete" class="hqp-page-btn hqp-page-btn-del" title="Delete page"><i class="fas fa-trash"></i></button>
            {{/if}}
          </div>
        </div>
        <div class="mm-web-canvas">
          <div class="mm-web-stage"></div>
        </div>
      </div>
    </div>
    {{else}}
    <div class="mm-web-none">
      <p>Build websites players can browse on a Game Computer.</p>
      <p>Click <b>+</b> on the left to create your first one.</p>
    </div>
    {{/if}}
  </div>
</form>
