<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{REPORT_TITLE}} — {{COURSE_NAME}}</title>
<style>
  /* Self-contained report styles — uses inline ASU design system tokens */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; background: #f7f7f8; color: #18181b; line-height: 1.6; }
  .report { max-width: 900px; margin: 0 auto; padding: 32px 24px; }

  /* Header */
  .report-header { background: linear-gradient(135deg, #8C1D40 0%, #4A0A24 70%, #2D0618 100%); color: white; padding: 32px; border-radius: 10px; margin-bottom: 24px; }
  .report-header-label { color: #FFC627; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 6px; }
  .report-header h1 { font-size: 24px; margin-bottom: 4px; color: white; }
  .report-header-meta { font-size: 14px; color: #e0d0d6; }

  /* Summary Bar */
  .summary-bar { display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
  .summary-card { flex: 1; min-width: 140px; background: white; border: 1px solid #e4e4e7; border-radius: 8px; padding: 16px; text-align: center; }
  .summary-card-value { font-size: 28px; font-weight: 700; }
  .summary-card-label { font-size: 12px; color: #71717a; text-transform: uppercase; letter-spacing: 0.5px; }
  .summary-card-value.pass { color: #16a34a; }
  .summary-card-value.warn { color: #f59e0b; }
  .summary-card-value.fail { color: #dc2626; }

  /* Sections */
  .report-section { background: white; border: 1px solid #e4e4e7; border-radius: 8px; margin-bottom: 16px; overflow: hidden; }
  .report-section-header { padding: 16px 20px; border-bottom: 1px solid #e4e4e7; display: flex; align-items: center; justify-content: space-between; }
  .report-section-header:hover { background: #f7f7f8; }
  .report-section-title { font-size: 15px; font-weight: 600; }
  .report-section-header-right { display: flex; align-items: center; gap: 10px; }
  .report-section-badge { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
  .badge-pass { background: #dcfce7; color: #16a34a; }
  .badge-warn { background: #fef3c7; color: #92400e; }
  .badge-fail { background: #fecaca; color: #dc2626; }
  .report-section-body { padding: 16px 20px; }

  /* Issue List */
  .issue-list { list-style: none; }
  .issue-item { padding: 12px 0; border-bottom: 1px solid #f0f0f2; }
  .issue-item:last-child { border-bottom: none; }
  .issue-row { display: flex; gap: 10px; align-items: flex-start; }
  .issue-severity { font-size: 14px; flex-shrink: 0; }
  .issue-content { flex: 1; }
  .issue-text { font-size: 13px; color: #333; }
  .issue-location { font-size: 11px; color: #71717a; display: block; margin-top: 2px; }

  /* Interactive: Page Link Pills */
  .issue-page-links { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
  .issue-page-link {
    display: inline-block; padding: 2px 10px; background: #f5f0f2; border: 1px solid #e8dde1;
    border-radius: 4px; font-size: 11px; color: #8C1D40; text-decoration: none; cursor: pointer;
    transition: all 0.15s;
  }
  .issue-page-link:hover { background: #8C1D40; color: white; border-color: #8C1D40; }

  /* Interactive: Fix Buttons */
  .issue-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
  .btn-fix {
    padding: 4px 12px; font-size: 11px; font-weight: 500;
    border: 1px solid #8C1D40; color: #8C1D40; background: white;
    border-radius: 4px; cursor: pointer; transition: all 0.15s;
  }
  .btn-fix:hover { background: #8C1D40; color: white; }
  .btn-fix-all {
    padding: 4px 10px; font-size: 11px; font-weight: 500;
    border: 1px solid #8C1D40; color: #8C1D40; background: white;
    border-radius: 4px; cursor: pointer; transition: all 0.15s;
  }
  .btn-fix-all:hover { background: #8C1D40; color: white; }
  .manual-note { font-size: 11px; color: #71717a; font-style: italic; margin-top: 8px; }

  /* Interactive: Fix Panel (expandable) */
  .fix-panel {
    margin-top: 10px; padding: 12px; background: #fafafa;
    border: 1px solid #e4e4e7; border-radius: 6px;
  }
  .fix-preview { font-size: 12px; color: #555; margin-bottom: 10px; line-height: 1.5; }
  .fix-preview strong { color: #333; }
  .fix-guidance-label { font-size: 11px; font-weight: 600; color: #555; display: block; margin-bottom: 4px; }
  .fix-guidance {
    width: 100%; font-size: 12px; font-family: inherit; padding: 6px 8px;
    border: 1px solid #d4d4d8; border-radius: 4px; resize: vertical; min-height: 36px;
  }
  .fix-guidance:focus { outline: none; border-color: #8C1D40; box-shadow: 0 0 0 2px rgba(140,29,64,0.15); }
  .fix-panel-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
  .btn-cancel-fix {
    padding: 5px 12px; font-size: 12px; border: 1px solid #d4d4d8;
    background: white; color: #555; border-radius: 4px; cursor: pointer;
  }
  .btn-cancel-fix:hover { background: #f5f5f5; }
  .btn-send-fix {
    padding: 5px 14px; font-size: 12px; font-weight: 500;
    border: none; background: #8C1D40; color: white;
    border-radius: 4px; cursor: pointer;
  }
  .btn-send-fix:hover { background: #6d1633; }

  /* Interactive: Status Badges */
  .fix-status-badge {
    display: inline-block; padding: 2px 8px; font-size: 10px; font-weight: 600;
    border-radius: 10px; text-transform: uppercase; letter-spacing: 0.3px;
  }
  .fix-status-badge.fixing { background: #dbeafe; color: #1d4ed8; animation: pulse 1.5s ease-in-out infinite; }
  .fix-status-badge.fixed { background: #dcfce7; color: #16a34a; }
  .fix-status-badge.error { background: #fecaca; color: #dc2626; }
  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }

  /* Footer */
  .report-footer { text-align: center; padding: 24px; font-size: 11px; color: #a1a1aa; }

  /* Print — hide interactive elements */
  @media print {
    body { background: white; }
    .report { padding: 0; max-width: 100%; }
    .report-section-header { break-inside: avoid; }
    .btn-fix, .btn-fix-all, .fix-panel, .issue-actions, .fix-status-badge { display: none !important; }
  }
</style>
</head>
<body>
<div class="report">

  <!-- HEADER — Replace {{PLACEHOLDERS}} when generating -->
  <div class="report-header">
    <div class="report-header-label">{{REPORT_TYPE}}</div>
    <h1>{{REPORT_TITLE}}</h1>
    <div class="report-header-meta">{{COURSE_NAME}} &middot; {{REPORT_DATE}}</div>
  </div>

  <!-- SUMMARY BAR — Populate with actual counts -->
  <div class="summary-bar">
    <div class="summary-card">
      <div class="summary-card-value">{{PAGES_SCANNED}}</div>
      <div class="summary-card-label">Pages Scanned</div>
    </div>
    <div class="summary-card">
      <div class="summary-card-value pass">{{PASS_COUNT}}</div>
      <div class="summary-card-label">Passed</div>
    </div>
    <div class="summary-card">
      <div class="summary-card-value warn">{{WARN_COUNT}}</div>
      <div class="summary-card-label">Warnings</div>
    </div>
    <div class="summary-card">
      <div class="summary-card-value fail">{{FAIL_COUNT}}</div>
      <div class="summary-card-label">Issues</div>
    </div>
  </div>

  <!--
  ============================================================
  INTERACTIVE ISSUE PATTERN — All skills must follow this format
  ============================================================

  SECTION WITH ISSUES (has "Fix All" button when auto-fixable):
  <div class="report-section" data-section-id="headings-h1">
    <div class="report-section-header">
      <span class="report-section-title">Category Name</span>
      <div class="report-section-header-right">
        <button class="btn-fix-all" data-action="fix-all-in-section">Fix All</button>
        <span class="report-section-badge badge-fail">N ISSUES</span>
      </div>
    </div>
    <div class="report-section-body">
      <p style="margin-bottom:12px;font-size:13px;color:#555;">Category explanation.</p>
      <ul class="issue-list">

        ISSUE ITEM (with data attributes for the studio to read):
        <li class="issue-item"
            data-issue-id="a11y-h1-001"
            data-issue-type="heading-hierarchy"
            data-severity="fail"
            data-affected-pages="m1-why-this-matters,m2-why-this-matters"
            data-affected-page-titles="M1 - Why This Matters,M2 - Why This Matters"
            data-fix-description="Replace all H1 tags with H2 in page content"
            data-fix-type="auto"
            data-report-type="accessibility-audit"
            data-course-id="218762">
          <div class="issue-row">
            <span class="issue-severity">&#10060;</span>
            <div class="issue-content">
              <span class="issue-text">H1 tag found in page content (Canvas reserves H1 for page title)</span>
              <div class="issue-page-links">
                <a href="#" class="issue-page-link" data-page-slug="m1-why-this-matters" data-page-title="M1 - Why This Matters">M1 - Why This Matters</a>
                <a href="#" class="issue-page-link" data-page-slug="m2-why-this-matters" data-page-title="M2 - Why This Matters">M2 - Why This Matters</a>
              </div>
              <div class="issue-actions">
                <button class="btn-fix" data-action="ask-claude-fix">Ask Claude to Fix</button>
                <span class="fix-status-badge" style="display:none"></span>
              </div>
              <div class="fix-panel" style="display:none">
                <div class="fix-preview">
                  <strong>Claude will:</strong> Replace all &lt;h1&gt; tags with &lt;h2&gt; across 2 affected pages.
                  This is an automated fix that preserves all other content.
                </div>
                <label class="fix-guidance-label">Add your own instructions (optional):</label>
                <textarea class="fix-guidance" rows="2" placeholder="e.g., Skip the Welcome page, only fix content modules..."></textarea>
                <div class="fix-panel-actions">
                  <button class="btn-cancel-fix" data-action="cancel-fix">Cancel</button>
                  <button class="btn-send-fix" data-action="send-fix">Send Fix Request</button>
                </div>
              </div>
            </div>
          </div>
        </li>

        MANUAL-ONLY ISSUE (no fix button, shows info note):
        <li class="issue-item"
            data-issue-id="a11y-caption-001"
            data-fix-type="manual"
            ...>
          <div class="issue-row">
            <span class="issue-severity">&#9888;&#65039;</span>
            <div class="issue-content">
              <span class="issue-text">Video embed detected — verify captions</span>
              <div class="issue-page-links">...</div>
              <p class="manual-note">Requires manual action — upload captions via Canvas media settings</p>
            </div>
          </div>
        </li>

      </ul>
    </div>
  </div>

  PASSING SECTION (no issues, no fix buttons):
  <div class="report-section">
    <div class="report-section-header">
      <span class="report-section-title">Category Name</span>
      <span class="report-section-badge badge-pass">PASS</span>
    </div>
    <div class="report-section-body">
      <p style="font-size:13px;color:#16a34a;">All checks passed. No issues found.</p>
    </div>
  </div>

  data-fix-type values:
    "auto"   — Claude can fix without human judgment (show fix button)
    "guided" — Claude needs user input (show fix button + emphasize guidance field)
    "manual" — Cannot be automated (show info note instead of fix button)

  data-affected-pages: comma-separated page slugs
  data-affected-page-titles: comma-separated human-readable titles (parallel order)
  -->

  {{REPORT_BODY}}

  <div class="report-footer">
    Generated by Canvas Content Studio &middot; {{REPORT_DATE}}
  </div>

</div>
</body>
</html>
