<%

var r = locals.range || {};
var support = locals.rangeSupport || 'exact';
var note = {
  exact: '',
  partial: 'Some figures cover the selected period',
  snapshot: 'Shows the latest run'
}[support] || '';

%>
<% if (support !== 'static') { %>
<details class="rangepick">
  <summary title="<%= r.span || '' %>">
    <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
      <rect x="2" y="3" width="12" height="11" rx="2" stroke="currentColor" stroke-width="1.4"/>
      <path d="M2 6.5h12M5.5 1.5v3M10.5 1.5v3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
    </svg>
    <span class="rp-label"><%= r.label || 'Last 30 days' %></span>
    <% if (note) { %><span class="rp-dot" title="<%= note %>"></span><% } %>
    <svg class="rp-chev" width="12" height="12" viewBox="0 0 16 16" fill="none"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
  </summary>

  <div class="rp-menu">
    <div class="rp-head">Period</div>
    <% (r.presets || []).forEach(function(p){ %>
      <a class="rp-item <%= p.on ? 'on' : '' %>" href="?range=<%= p.key %>"><%= p.label %><% if (p.on) { %><span class="rp-tick">✓</span><% } %></a>
    <% }) %>

    <div class="rp-head" style="margin-top:6px">Custom</div>
    <form class="rp-custom" method="GET">
      <input type="hidden" name="range" value="custom">
      <label>From<input type="date" name="from" value="<%= r.from || '' %>" max="<%= r.to || '' %>"></label>
      <label>To<input type="date" name="to" value="<%= r.to || '' %>"></label>
      <button class="btn btn-sm btn-primary" type="submit">Apply</button>
    </form>

    <div class="rp-foot">
      <%= r.span || '' %><%= r.days ? ' · ' + r.days + ' day' + (r.days > 1 ? 's' : '') : '' %>
      <% if (note) { %><br><b><%= note %>.</b><% } %>
    </div>
  </div>
</details>
<% } %>
