<!doctype html>
<!-- Copyright (c) Microsoft Corporation.
 Licensed under the MIT License. -->

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Macro Discovery Panel</title>
    <link rel="stylesheet" href="../vendor/bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="../vendor/prism/prism.css" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css"
    />
    <link rel="stylesheet" href="pageMacros.css" />
  </head>
  <body>
    <div class="container-fluid p-3">
      <!-- Header Section -->
      <div class="macro-header rounded">
        <div class="d-flex justify-content-between align-items-center">
          <div>
            <h4 class="mb-1">Discover Page Actions</h4>
            <small id="connectionStatus">
              <span class="status-indicator status-connected"></span>
              Ready to discover actions
            </small>
          </div>
          <div class="auto-discovery-toggle">
            <div class="form-check form-switch">
              <input
                class="form-check-input"
                type="checkbox"
                id="autoDiscoveryToggle"
              />
              <label
                class="form-check-label text-muted"
                for="autoDiscoveryToggle"
              >
                Auto-scan
              </label>
            </div>
          </div>
        </div>
      </div>

      <!-- Detected Actions Section -->
      <div class="macro-card card">
        <div
          class="card-header d-flex justify-content-between align-items-center"
        >
          <h6 class="mb-0">
            <i class="bi bi-search"></i> Detected Actions
            <span id="detectedActionsCount" class="badge bg-secondary ms-2"
              >0</span
            >
          </h6>
          <button
            id="refreshDetectedActions"
            class="btn btn-primary btn-sm"
            title="Refresh detected actions"
          >
            <i class="bi bi-arrow-clockwise"></i>
          </button>
        </div>
        <div class="card-body">
          <div id="detectedActionsContainer">
            <div id="detectedSchemaItemsList">
              <div class="text-center text-muted">
                <i class="bi bi-hourglass-split"></i>
                <p class="mb-0">
                  Click "Scan" to discover actions on this page
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- User-Defined Actions Section -->
      <div class="macro-card card">
        <div
          class="card-header d-flex justify-content-between align-items-center"
        >
          <h6 class="mb-0">
            <i class="bi bi-person-gear"></i> Custom Actions
            <span id="customActionsCount" class="badge bg-secondary ms-2"
              >0</span
            >
          </h6>
          <div class="btn-group btn-group-sm">
            <button
              id="addPageAction"
              class="btn btn-primary"
              title="Add new custom action"
            >
              <i class="bi bi-plus-circle"></i> Add
            </button>
            <button
              id="clearRecordedActions"
              class="btn btn-outline-secondary"
              title="Clear all custom actions"
            >
              <i class="bi bi-trash"></i>
            </button>
          </div>
        </div>
        <div class="card-body">
          <div id="userActionsContainer">
            <div id="userActionsListContainer">
              <div class="text-center text-muted">
                <i class="bi bi-info-circle"></i>
                <p class="mb-0">No custom actions defined yet</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Screenshot Container (Hidden by default) -->
      <div id="screenshotContainer" class="d-none">
        <div class="macro-card card">
          <div class="card-header">
            <h6 class="mb-0"><i class="bi bi-camera"></i> Page Screenshot</h6>
          </div>
          <div class="card-body">
            <div id="screenshotContent" class="text-center">
              <!-- Screenshot will be displayed here -->
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Scripts -->
    <script src="pageMacros.js"></script>
    <script src="../vendor/bootstrap/bootstrap.bundle.min.js"></script>
    <script src="../vendor/prism/prism.js"></script>
    <script src="../vendor/prism/prism-typescript.js"></script>
    <script src="../vendor/prism/prism-json.js"></script>
    <script src="../vendor/prism/prism-yaml.js"></script>
  </body>
</html>
