// Shared offcanvas renderer for region placeholder documentation.

(function () {
  var root = window;

  function escapeHtml(value) {
    return String(value === undefined || value === null ? '' : value)
      .replace(/&/g, '&')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#39;');
  }

  function render(regionId, title, body) {
    var offcanvasId = String(regionId || 'region') + '-placeholder-info';
    return '' +
      '<button type="button" class="btn btn-link btn-sm p-0 text-decoration-none" data-bs-toggle="offcanvas" data-bs-target="#' + offcanvasId + '" aria-controls="' + offcanvasId + '">More info</button>' +
      '<div class="offcanvas offcanvas-end fw-normal" tabindex="-1" id="' + offcanvasId + '" aria-labelledby="' + offcanvasId + '-label">' +
        '<div class="offcanvas-header">' +
          '<h2 class="offcanvas-title fs-5" id="' + offcanvasId + '-label">' + escapeHtml(title) + '</h2>' +
          '<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>' +
        '</div>' +
        '<div class="offcanvas-body">' + body + '</div>' +
      '</div>';
  }

  function renderTextTransforms() {
    return '<h3 class="fs-6 mt-4 fw-normal">Text transforms</h3>' +
      '<dl class="small fw-normal">' +
        '<dt class="fw-normal"><code>upper()</code></dt><dd>Converts text to uppercase.</dd>' +
        '<dt class="fw-normal"><code>lower()</code></dt><dd>Converts text to lowercase.</dd>' +
        '<dt class="fw-normal"><code>title()</code></dt><dd>Capitalizes each word.</dd>' +
        '<dt class="fw-normal"><code>tz()</code></dt><dd>Returns the short timezone name for a date.</dd>' +
        '<dt class="fw-normal"><code>tz_long()</code></dt><dd>Returns the full timezone name for a date.</dd>' +
      '</dl>';
  }

  function renderDateFormatTokens() {
    return '<h3 class="fs-6 mt-4 fw-normal">Date format tokens</h3>' +
      '<p class="small">Use the <code>format("...")</code> transform with these tokens. Text inside square brackets is treated as a literal.</p>' +
      '<div class="table-responsive small"><table class="table table-sm align-middle mb-0"><thead><tr><th>Token</th><th>Meaning</th><th>Example</th></tr></thead><tbody>' +
        '<tr><td><code>YYYY</code></td><td>Four-digit year</td><td><code>2026</code></td></tr><tr><td><code>YY</code></td><td>Two-digit year</td><td><code>26</code></td></tr>' +
        '<tr><td><code>MMMM</code></td><td>Full month name</td><td><code>August</code></td></tr><tr><td><code>MMM</code></td><td>Short month name</td><td><code>Aug</code></td></tr>' +
        '<tr><td><code>MM</code></td><td>Two-digit month</td><td><code>08</code></td></tr><tr><td><code>M</code></td><td>Month number</td><td><code>8</code></td></tr>' +
        '<tr><td><code>DD</code></td><td>Two-digit day</td><td><code>16</code></td></tr><tr><td><code>D</code></td><td>Day number</td><td><code>16</code></td></tr>' +
        '<tr><td><code>dddd</code></td><td>Full weekday name</td><td><code>Sunday</code></td></tr><tr><td><code>ddd</code></td><td>Short weekday name</td><td><code>Sun</code></td></tr>' +
        '<tr><td><code>HH</code> / <code>H</code></td><td>24-hour time</td><td><code>19</code> / <code>7</code></td></tr><tr><td><code>hh</code> / <code>h</code></td><td>12-hour time</td><td><code>07</code> / <code>7</code></td></tr>' +
        '<tr><td><code>mm</code> / <code>m</code></td><td>Minutes</td><td><code>05</code> / <code>5</code></td></tr><tr><td><code>ss</code> / <code>s</code></td><td>Seconds</td><td><code>09</code> / <code>9</code></td></tr>' +
        '<tr><td><code>A</code> / <code>a</code></td><td>AM or PM</td><td><code>PM</code> / <code>pm</code></td></tr>' +
      '</tbody></table></div>';
  }

  function renderImageTransform() {
    return '<h3 class="fs-6 mt-4 fw-normal">Image transform</h3>' +
      '<p class="small">Use <code>image(width, height)</code> to render an image URL inside a proportional bounding box.</p>' +
      '<ul class="small"><li>The preview shows the width and height boundary.</li><li>The player has no boundary.</li><li>The image keeps its original aspect ratio.</li><li>Both dimensions are required for a bounding box.</li></ul>';
  }

  root.placeholderInfo = {
    escapeHtml: escapeHtml,
    render: render,
    renderTextTransforms: renderTextTransforms,
    renderDateFormatTokens: renderDateFormatTokens,
    renderImageTransform: renderImageTransform
  };
}());