{% macro render_content(item) %}
  {% if item.template_slug %}
    {% set values = item.template_values %}
    <div
      class="creative creative-{{ item.template_slug }}"
      style="--creative-brand: {{ values.brand_color }}; --creative-text: {{ values.text_color }}"
    >
      <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 %}
      </div>
      {% 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 == "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 muted 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) }}"
      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>
    <div class="live-content-offline" hidden>
      <strong>Live content unavailable offline</strong>
      <span>{{ item.title }}</span>
    </div>
  {% endif %}
{% endmacro %}