{# QR Code Module - Self-hosted QR code generator #}

{# Shorthand variables for cleaner code #}
{% set c = module.content %}
{% set s = module.style %}

{# Module Variables.
   For 'current_page' we emit EMPTY content and let the init JS read
   window.location.href client-side — server-rendering request.full_url makes the
   whole page ineligible for HubSpot prerender caching (TTFB hit on every page). #}
{% set qr_content = c.content_type == 'current_page' ? '' : c.custom_content %}
{% set qr_id = "qr-code-" ~ name %}

{# Module HTML #}
<div class="qr-code-module {{ s.alignment }}" id="{{ qr_id }}">
  {% if c.show_title %}
    <h3 class="qr-code-title">{{ c.title }}</h3>
  {% endif %}

  {% if c.show_description %}
    <p class="qr-code-description">{{ c.description }}</p>
  {% endif %}

  <div class="qr-code-container"
       role="img"
       aria-label="QR code{% if c.content_type == 'custom' and c.custom_content %} for {{ c.custom_content|escape|truncate(60) }}{% endif %}"
       data-qr-content="{{ qr_content }}"
       data-qr-size="{{ s.size }}"
       data-qr-dark="{{ s.dark_color.color }}"
       data-qr-light="{{ s.light_color.color }}"
       data-qr-download="{{ c.show_download }}"
       data-qr-format="{{ c.format }}">
  </div>

  {% if c.show_download %}
    <button class="btn btn-secondary qr-download-btn" style="margin-top: 1rem;">
      {{ c.download_text }}
    </button>
  {% endif %}

  {% if c.show_text %}
    {# For current_page the URL is filled in client-side by qr-code-init.js. #}
    <p class="qr-code-text">{{ c.text_label }}: <code class="qr-code-url">{% if c.content_type != 'current_page' %}{{ qr_content|truncate(50) }}{% endif %}</code></p>
  {% endif %}
</div>

{# Inline styles for this module instance #}
<style>
  #{{ qr_id }} {
    text-align: {{ s.alignment }};
    margin: {{ s.margin }}px 0;
    padding: {{ s.padding }}px;
  }

  #{{ qr_id }} .qr-code-container {
    display: inline-block;
    padding: {{ s.qr_padding }}px;
    {% if s.background_color.color %}
      background: {{ s.background_color.color }};
    {% else %}
      {# Quiet zone must match the QR light color, not the page bg — a dark quiet
         zone around a white-background code hurts scanner reliability in dark mode. #}
      background: {{ s.light_color.color|default('#FFFFFF', true) }};
    {% endif %}
    border-radius: {{ s.border_radius }}px;
    {% if s.show_border %}
      border: {{ s.border_width }}px solid {% if s.border_color.color %}{{ s.border_color.color }}{% else %}var(--color-border, #e0e0e0){% endif %};
    {% endif %}
    {% if s.show_shadow %}
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    {% endif %}
  }
</style>

{# Load QR library + init via require_js so HubSpot dedupes them when several QR
   modules share a page (raw <script> tags re-execute per instance). #}
{{ require_js(get_asset_url('../../js/qrcode.min.js'), 'footer') }}
{{ require_js(get_asset_url('../../js/components/qr-code-init.js'), 'footer') }}