{% macro render_content(item) %}
  {% if item.template_slug %}
    {% set values = resolved_template_values(item) %}
    {% if values.heading_font %}<style>@font-face{font-family:"CreativeHeading{{ item.id }}";src:url("{{ url_for('content.uploaded_file', filename=values.heading_font) }}") format("woff2")}</style>{% endif %}
    {% if values.body_font %}<style>@font-face{font-family:"CreativeBody{{ item.id }}";src:url("{{ url_for('content.uploaded_file', filename=values.body_font) }}") format("woff2")}</style>{% endif %}
    <div
      class="creative creative-{{ item.template_slug }}"
      style="--creative-brand: {{ values.brand_color }}; --creative-secondary: {{ values.secondary_color or values.brand_color }}; --creative-text: {{ values.text_color }}; --creative-heading-font: {{ 'CreativeHeading' ~ item.id if values.heading_font else 'inherit' }}; --creative-body-font: {{ 'CreativeBody' ~ item.id if values.body_font else 'inherit' }}"
    >
      {% if values.brand_logo %}<img class="creative-brand-logo" src="{{ url_for('content.uploaded_file', filename=values.brand_logo) }}" alt="{{ values.brand_kit_name or 'Brand' }} logo">{% endif %}
      {% if item.template_slug == "menu-board" %}
        <div class="creative-menu-heading">
          {% if values.eyebrow %}
            <p class="creative-eyebrow">{{ values.eyebrow }}</p>
          {% endif %}
          <h1 class="creative-headline">{{ values.headline }}</h1>
        </div>
        <ul class="creative-menu-items">
          {% for number in range(1, 7) %}
            {% set name = values["item_" ~ number ~ "_name"] %}
            {% set description = values["item_" ~ number ~ "_description"] %}
            {% set price = values["item_" ~ number ~ "_price"] %}
            {% if name and price %}
              <li>
                <div>
                  <strong>{{ name }}</strong>
                  {% if description %}<span>{{ description }}</span>{% endif %}
                </div>
                <b>{{ price }}</b>
              </li>
            {% endif %}
          {% endfor %}
        </ul>
        {% if values.body %}
          <p class="creative-menu-footer">{{ values.body }}</p>
        {% endif %}
      {% else %}
        <div class="creative-copy">
          {% if values.eyebrow %}
            <p class="creative-eyebrow">{{ values.eyebrow }}</p>
          {% endif %}
          <h1 class="creative-headline">{{ values.headline }}</h1>
          {% if values.body %}
            <p class="creative-body">{{ values.body }}</p>
          {% endif %}
          {% if values.price %}
            <p class="creative-price">{{ values.price }}</p>
          {% endif %}
          {% if values.callout %}
            <p class="creative-callout">{{ values.callout }}</p>
          {% endif %}
        </div>
      {% endif %}
      {% if item.filename %}
        <img
          class="creative-image"
          src="{{ url_for('content.uploaded_file', filename=item.filename) }}"
          alt="{{ values.image_alt }}"
        >
      {% endif %}
    </div>
  {% elif item.widget_type == "stream" %}
    {% set fallback = stream_fallback(item.id) %}
    <div class="stream-player" data-stream-url="{{ item.source }}">
      <video {% if display_profile is not defined or display_profile.audio_policy != "enabled" %}muted{% endif %} playsinline preload="none"></video>
      <div class="stream-fallback" hidden>
        {% if fallback %}{{ render_content(fallback) }}{% endif %}
      </div>
    </div>
  {% elif item.widget_type == "qr" %}
    {% set values = item.template_values %}
    <section class="widget widget-qr" aria-label="{{ item.title }}">
      <div class="widget-qr-code">
        <img
          src="{{ url_for('content.qr_code', item_id=item.id) }}"
          alt="QR code for {{ values.name if values.mode == 'contact' else values.website }}"
        >
      </div>
      <div class="widget-qr-copy">
        <h1>{{ item.title }}</h1>
        {% if values.mode == "contact" %}
          <p>{{ values.name }}</p>
          {% if values.organization %}<p>{{ values.organization }}</p>{% endif %}
          <span>Scan to save contact information</span>
        {% else %}
          <p>{{ values.website }}</p>
          <span>Scan to visit this website</span>
        {% endif %}
      </div>
    </section>
  {% elif item.widget_type == "clock" %}
    <section
      class="widget widget-clock"
      data-clock-widget
      data-timezone="{{ item.source }}"
      aria-label="{{ item.title }}"
    >
      <p class="widget-clock-time">--:--</p>
      <p class="widget-clock-date"></p>
      <p class="widget-clock-zone">{{ item.source }}</p>
    </section>
  {% elif item.kind == "image" %}
    <img
      src="{{ url_for('content.uploaded_file', filename=item.filename) }}"
      alt="{{ item.title }}"
    >
  {% elif item.kind == "video" %}
    <video autoplay {% if display_profile is not defined or display_profile.audio_policy != "enabled" %}muted{% endif %} playsinline preload="auto">
      <source
        src="{{ url_for('content.uploaded_file', filename=item.filename) }}"
        type="{{ item.mime_type }}"
      >
    </video>
  {% elif item.kind == "pdf" %}
    <iframe
      src="{{ url_for('content.uploaded_file', filename=item.filename) }}"
      title="{{ item.title }}"
    ></iframe>
  {% elif item.kind == "text" %}
    <div class="signage-text">{{ item.source }}</div>
  {% elif item.kind == "rss" %}
    <section
      class="widget widget-feed"
      data-feed-widget
      data-feed-url="{{ url_for('content.feed', item_id=item.id) }}"
      data-feed-snapshot-url="{{ offline_snapshots.get(item.id, '') if offline_snapshots is defined else '' }}"
      aria-label="{{ item.title }}"
    >
      <p class="widget-label">{{ item.title }}</p>
      <h1 class="widget-feed-title">Loading live feed…</h1>
      <div class="widget-feed-items" aria-live="polite"></div>
      <p class="widget-feed-status" role="status"></p>
    </section>
    <div class="live-content-offline" hidden>
      <strong>Live feed unavailable offline</strong>
      <span>{{ item.title }}</span>
    </div>
  {% elif item.kind == "web" %}
    <iframe
      class="live-content-frame"
      src="{{ item.source }}"
      title="{{ item.title }}"
    ></iframe>
    {% if offline_snapshots is defined and offline_snapshots.get(item.id) %}
      <img
        class="live-content-snapshot"
        src="{{ offline_snapshots[item.id] }}"
        alt="Offline snapshot of {{ item.title }}"
        hidden
      >
    {% endif %}
    <div class="live-content-offline" hidden>
      <strong>Live content unavailable offline</strong>
      <span>{{ item.title }}</span>
    </div>
  {% endif %}
{% endmacro %}