<!--
  ASUCB Mockup Placeholder Card Template

  Used for non-page content in course mockups: quizzes, discussions,
  assignments, and external tools. These cards show the actual content
  (questions, prompts, rubric criteria) but are clearly marked as previews.

  Placeholders:
    {{ICON}}              — Emoji icon for the content type
    {{TYPE_LABEL}}        — e.g., "Knowledge Check", "Discussion", "External Tool: Harmonize"
    {{TITLE}}             — Content title
    {{CONTENT_PREVIEW}}   — HTML showing the actual content details
    {{SETTINGS_SUMMARY}}  — Optional settings line (points, time limit, etc.)
-->

<!-- Quiz / Knowledge Check -->
<!--
<div style="border: 2px dashed #8C1D40; border-radius: 8px; padding: 24px; margin: 20px 0; background: #faf5f7; position: relative;">
  <div style="position: absolute; top: 8px; right: 12px; font-size: 10px; color: #8C1D40; text-transform: uppercase; letter-spacing: 1px;"><strong>Preview Only</strong></div>
  <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px;">
    <span style="font-size: 24px;">&#10067;</span>
    <div>
      <p style="font-size: 11px; color: #8C1D40; text-transform: uppercase; letter-spacing: 0.5px; margin: 0;"><strong>Knowledge Check</strong></p>
      <h4 style="margin: 0; color: #333; font-size: 18px;">Knowledge Check 1</h4>
    </div>
  </div>
  <div style="background: white; border: 1px solid #e8dde1; border-radius: 6px; padding: 16px; margin-bottom: 12px;">
    <p style="color: #8C1D40; font-size: 12px; margin: 0 0 8px 0;"><strong>SAMPLE QUESTIONS</strong></p>
    <ol style="color: #555; font-size: 14px; line-height: 1.8; padding-left: 20px; margin: 0;">
      <li>Question text here...</li>
      <li>Question text here...</li>
      <li>Question text here...</li>
    </ol>
  </div>
  <p style="color: #71717a; font-size: 12px; margin: 0;">5 questions &middot; 15 points &middot; Unlimited attempts &middot; Auto-graded</p>
</div>
-->

<!-- Discussion -->
<!--
<div style="border: 2px dashed #8C1D40; border-radius: 8px; padding: 24px; margin: 20px 0; background: #faf5f7; position: relative;">
  <div style="position: absolute; top: 8px; right: 12px; font-size: 10px; color: #8C1D40; text-transform: uppercase; letter-spacing: 1px;"><strong>Preview Only</strong></div>
  <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px;">
    <span style="font-size: 24px;">&#128172;</span>
    <div>
      <p style="font-size: 11px; color: #8C1D40; text-transform: uppercase; letter-spacing: 0.5px; margin: 0;"><strong>Discussion</strong></p>
      <h4 style="margin: 0; color: #333; font-size: 18px;">Discussion Title</h4>
    </div>
  </div>
  <div style="background: white; border: 1px solid #e8dde1; border-radius: 6px; padding: 16px; margin-bottom: 12px;">
    <p style="color: #8C1D40; font-size: 12px; margin: 0 0 8px 0;"><strong>PROMPT</strong></p>
    <p style="color: #555; font-size: 14px; line-height: 1.6; margin: 0;">Discussion prompt text here...</p>
  </div>
  <p style="color: #71717a; font-size: 12px; margin: 0;">Threaded &middot; 25 points &middot; 2 replies required &middot; Must post before viewing</p>
</div>
-->

<!-- Assignment -->
<!--
<div style="border: 2px dashed #8C1D40; border-radius: 8px; padding: 24px; margin: 20px 0; background: #faf5f7; position: relative;">
  <div style="position: absolute; top: 8px; right: 12px; font-size: 10px; color: #8C1D40; text-transform: uppercase; letter-spacing: 1px;"><strong>Preview Only</strong></div>
  <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px;">
    <span style="font-size: 24px;">&#128221;</span>
    <div>
      <p style="font-size: 11px; color: #8C1D40; text-transform: uppercase; letter-spacing: 0.5px; margin: 0;"><strong>Assignment</strong></p>
      <h4 style="margin: 0; color: #333; font-size: 18px;">Assignment Title</h4>
    </div>
  </div>
  <div style="background: white; border: 1px solid #e8dde1; border-radius: 6px; padding: 16px; margin-bottom: 12px;">
    <p style="color: #8C1D40; font-size: 12px; margin: 0 0 8px 0;"><strong>INSTRUCTIONS</strong></p>
    <p style="color: #555; font-size: 14px; line-height: 1.6; margin: 0;">Assignment instructions here...</p>
  </div>
  <div style="background: white; border: 1px solid #e8dde1; border-radius: 6px; padding: 16px; margin-bottom: 12px;">
    <p style="color: #8C1D40; font-size: 12px; margin: 0 0 8px 0;"><strong>RUBRIC</strong></p>
    <table style="width: 100%; border-collapse: collapse; font-size: 13px;">
      <thead>
        <tr style="border-bottom: 2px solid #8C1D40;">
          <th style="text-align: left; padding: 8px; color: #8C1D40;">Criterion</th>
          <th style="text-align: center; padding: 8px; color: #8C1D40;">Excellent</th>
          <th style="text-align: center; padding: 8px; color: #8C1D40;">Proficient</th>
          <th style="text-align: center; padding: 8px; color: #8C1D40;">Developing</th>
          <th style="text-align: center; padding: 8px; color: #8C1D40;">Beginning</th>
        </tr>
      </thead>
      <tbody>
        <tr style="border-bottom: 1px solid #e8dde1;">
          <td style="padding: 8px; color: #333;">Criterion 1</td>
          <td style="padding: 8px; text-align: center; color: #595959;">Description</td>
          <td style="padding: 8px; text-align: center; color: #595959;">Description</td>
          <td style="padding: 8px; text-align: center; color: #595959;">Description</td>
          <td style="padding: 8px; text-align: center; color: #595959;">Description</td>
        </tr>
      </tbody>
    </table>
  </div>
  <p style="color: #71717a; font-size: 12px; margin: 0;">30 points &middot; Online upload &middot; Rubric-graded</p>
</div>
-->

<!-- External Tool -->
<!--
<div style="border: 2px dashed #8C1D40; border-radius: 8px; padding: 24px; margin: 20px 0; background: #faf5f7; position: relative;">
  <div style="position: absolute; top: 8px; right: 12px; font-size: 10px; color: #8C1D40; text-transform: uppercase; letter-spacing: 1px;"><strong>Preview Only</strong></div>
  <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px;">
    <span style="font-size: 24px;">&#128279;</span>
    <div>
      <p style="font-size: 11px; color: #8C1D40; text-transform: uppercase; letter-spacing: 0.5px; margin: 0;"><strong>External Tool: Harmonize</strong></p>
      <h4 style="margin: 0; color: #333; font-size: 18px;">Module 1 Discussion</h4>
    </div>
  </div>
  <div style="background: white; border: 1px solid #e8dde1; border-radius: 6px; padding: 16px; margin-bottom: 12px;">
    <p style="color: #8C1D40; font-size: 12px; margin: 0 0 8px 0;"><strong>DISCUSSION PROMPT</strong></p>
    <p style="color: #555; font-size: 14px; line-height: 1.6; margin: 0;">Prompt text that will be configured in Harmonize...</p>
  </div>
  <div style="background: #fff8e1; border: 1px solid #FFC627; border-radius: 6px; padding: 12px; margin-bottom: 12px;">
    <p style="color: #333; font-size: 13px; margin: 0;"><strong>Manual step:</strong> ID will configure this discussion in Harmonize after course build.</p>
  </div>
  <p style="color: #71717a; font-size: 12px; margin: 0;">Rubric-graded &middot; 2 replies required</p>
</div>
-->
