<section id="avenue-cost-ticker" aria-labelledby="ticker-title" data-currency="" data-tz="">
  <div class="ticker-card" style="--brand: ;">
    <h2 id="ticker-title"></h2>
    <p class="lede"></p>

    <div class="totals">
      <div class="grand">
        <div class="label">Total avoidable cost today (resets at midnight)</div>
        <div class="value" id="totalToday">$0</div>
      </div>
      <div class="subgrid">
        <div><span class="k">This minute</span><span id="totalThisMinute">$0</span></div>
        <div><span class="k">This hour</span><span id="totalThisHour">$0</span></div>
        <div><span class="k">This week</span><span id="totalThisWeek">$0</span></div>
        <div><span class="k">This year</span><span id="totalThisYear">$0</span></div>
      </div>
    </div>

    {% if module.show_cards %}
    <div class="grid">
      <article class="card">
        <header>OR time losses</header>
        <div class="line"><span class="k">Per minute:</span> <span id="orPerMinute">$0</span></div>
        <div class="line"><span class="k">Today so far:</span> <span id="orToday">$0</span></div>
      </article>
      <article class="card">
        <header>Equipment damage</header>
        <div class="line"><span class="k">Per minute:</span> <span id="damagePerMinute">$0</span></div>
        <div class="line"><span class="k">Today so far:</span> <span id="damageToday">$0</span></div>
      </article>
      <article class="card">
        <header>Staffing overhead</header>
        <div class="line"><span class="k">Per minute:</span> <span id="staffPerMinute">$0</span></div>
        <div class="line"><span class="k">Today so far:</span> <span id="staffToday">$0</span></div>
      </article>
      <article class="card">
        <header>Liability exposure</header>
        <div class="line"><span class="k">Per minute:</span> <span id="liabilityPerMinute">$0</span></div>
        <div class="line"><span class="k">Today so far:</span> <span id="liabilityToday">$0</span></div>
      </article>
      <article class="card">
        <header>Other costs</header>
        <div class="line"><span class="k">Per minute:</span> <span id="otherPerMinute">$0</span></div>
        <div class="line"><span class="k">Today so far:</span> <span id="otherToday">$0</span></div>
      </article>
    </div>
    {% endif %}

    <div class="actions">
      <button class="btn" type="button" id="copySnapshot">Copy Snapshot</button>
      <span class="muted" id="copyNotice" role="status" aria-live="polite"></span>
    </div>

    <p class="fineprint">These are illustrative, system-level estimates using configurable averages. For accuracy, plug in your own organization’s data or talk with Avenue.</p>
    {% if module.methodology_text %}
    <p class="fineprint"></p>
    {% endif %}
  </div>
</section>
