<form class="scrying-pool scrying-pool-settings">
  <div class="scrying-pool-settings__inner">
    <!-- Drag grip -->
    <div class="scrying-pool-settings__grip" title="Drag to move">
      <i class="fa-solid fa-grip-lines"></i>
    </div>
    
    <!-- Close button -->
    <button type="button" class="scrying-pool-settings__close-btn" data-action="close">
      <i class="fa-solid fa-times"></i>
    </button>
    
    <!-- Header -->
    <div class="scrying-pool-settings__header">
      <h2 class="scrying-pool-settings__title">{{localize "SCRYING_POOL.Settings.Title"}}</h2>
      <p class="scrying-pool-settings__hint">{{localize "SCRYING_POOL.Settings.Hint"}}</p>
    </div>

    <!-- Content -->
    <div class="scrying-pool-settings__content">
      <div class="scrying-pool-settings__status">
        <label class="scrying-pool-settings__label">{{localize "SCRYING_POOL.Settings.StripStatus"}}</label>
        {{#if hasStrip}}
          <button type="button" data-action="close-strip" class="scrying-pool-settings__btn scrying-pool-settings__btn--close">
            <i class="fa-solid fa-eye-slash"></i> {{localize "SCRYING_POOL.Settings.CloseStrip"}}
          </button>
        {{else}}
          <button type="button" data-action="reopen-strip" class="scrying-pool-settings__btn scrying-pool-settings__btn--reopen">
            <i class="fa-solid fa-eye"></i> {{localize "SCRYING_POOL.Settings.ReopenStrip"}}
          </button>
        {{/if}}
      </div>
    </div>

    <!-- Layout selector -->
    <div class="scrying-pool-settings__content">
      <div class="scrying-pool-settings__status">
        <label class="scrying-pool-settings__label">View Layout</label>
        <div class="scrying-pool-settings__layout-group">
          {{#each dockLayouts}}
          <button type="button"
                  class="scrying-pool-settings__layout-btn{{#if isActive}} is-active{{/if}}"
                  data-action="set-dock-layout"
                  data-layout="{{key}}"
                  data-tooltip="{{label}}">
            <i class="fas {{icon}}" aria-hidden="true"></i>
            <span class="scrying-pool-settings__layout-size">{{size}}</span>
          </button>
          {{/each}}
        </div>
      </div>
    </div>
  </div>

  <style>
    /* Match Director's Board styling */
    .scrying-pool-settings {
      background: linear-gradient(175deg, hsl(220, 18%, 13%) 0%, hsl(220, 15%, 10%) 100%);
      color: var(--sp-text-primary, #dde2e8);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-top: 2px solid hsl(200, 55%, 40%);
      border-radius: 8px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35),
                  inset 0 1px 0 rgba(255, 255, 255, 0.04);
      min-width: 320px;
    }

    /* Hide Foundry's default window header */
    .scrying-pool-settings header.window-header {
      display: none;
    }

    .scrying-pool-settings__inner {
      position: relative;
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    /* Drag grip */
    .scrying-pool-settings__grip {
      width: 100%;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: grab;
      color: var(--sp-text-muted, hsl(0, 0%, 70%));
      opacity: 0.35;
      font-size: 10px;
      flex-shrink: 0;
      transition: opacity 0.15s, background 0.15s;
      user-select: none;
      border-radius: 8px 8px 0 0;
    }

    .scrying-pool-settings__grip:hover {
      opacity: 0.8;
      background: rgba(255, 255, 255, 0.03);
    }

    .scrying-pool-settings__grip:active {
      cursor: grabbing;
      opacity: 1;
    }

    /* Close button */
    .scrying-pool-settings__close-btn {
      position: absolute;
      top: 2px;
      right: 6px;
      z-index: 10;
      width: 20px;
      height: 20px;
      padding: 0;
      line-height: 20px;
      font-size: 14px;
      font-weight: 400;
      background: transparent;
      color: var(--sp-text-muted, hsl(0, 0%, 70%));
      border: none;
      border-radius: 3px;
      cursor: pointer;
      opacity: 0.5;
      transition: opacity 0.15s, background 0.15s, color 0.15s;
    }

    .scrying-pool-settings__close-btn:hover {
      opacity: 1;
      background: rgba(255, 255, 255, 0.08);
      color: var(--sp-text-primary, #dde2e8);
    }

    .scrying-pool-settings__close-btn:active {
      opacity: 0.75;
    }

    /* Header */
    .scrying-pool-settings__header {
      padding: 12px 16px 8px;
    }

    .scrying-pool-settings__title {
      margin: 0 0 4px 0;
      font-size: 16px;
      font-weight: 600;
      color: var(--sp-text-primary, #dde2e8);
      text-align: center;
    }

    .scrying-pool-settings__hint {
      margin: 0;
      font-size: 12px;
      color: var(--sp-text-muted, hsl(0, 0%, 60%));
      text-align: center;
      line-height: 1.4;
    }

    /* Content */
    .scrying-pool-settings__content {
      padding: 8px 16px 16px;
      display: flex;
      justify-content: center;
    }

    .scrying-pool-settings__status {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .scrying-pool-settings__label {
      font-size: 12px;
      color: var(--sp-text-muted, hsl(0, 0%, 65%));
      font-weight: 500;
    }

    /* Buttons */
    .scrying-pool-settings__btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 500;
      border: none;
      border-radius: 4px;
      padding: 8px 16px;
      cursor: pointer;
      transition: background 0.15s, opacity 0.15s, transform 0.1s;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

      i {
        font-size: 12px;
        pointer-events: none;
      }

      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
      }

      &:active {
        transform: translateY(0);
        opacity: 0.9;
      }
    }

    .scrying-pool-settings__btn--reopen {
      background: linear-gradient(175deg, hsl(120, 60%, 30%) 0%, hsl(120, 60%, 25%) 100%);
      color: #d0f0d0;
      border: 1px solid rgba(0, 255, 0, 0.3);

      &:hover {
        background: linear-gradient(175deg, hsl(120, 60%, 35%) 0%, hsl(120, 60%, 30%) 100%);
      }
    }

    .scrying-pool-settings__btn--close {
      background: linear-gradient(175deg, hsl(0, 60%, 30%) 0%, hsl(0, 60%, 25%) 100%);
      color: #f0d0d0;
      border: 1px solid rgba(255, 0, 0, 0.3);

      &:hover {
        background: linear-gradient(175deg, hsl(0, 60%, 35%) 0%, hsl(0, 60%, 30%) 100%);
      }
    }

    /* Layout selector */
    .scrying-pool-settings__layout-group {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      justify-content: center;
    }

    .scrying-pool-settings__layout-btn {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 4px 7px;
      font-size: 11px;
      font-weight: 500;
      background: rgba(255, 255, 255, 0.06);
      color: var(--sp-text-primary, #dde2e8);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 4px;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;

      i {
        font-size: 10px;
        pointer-events: none;
      }

      &:hover {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.2);
      }

      &.is-active {
        background: hsl(200, 55%, 35%);
        border-color: hsl(200, 55%, 50%);
      }
    }

    .scrying-pool-settings__layout-size {
      font-size: 9px;
      opacity: 0.6;
    }
  </style>
</form>
