1 % my $dt_attr = stash('default_timeframe') ? 'data-default-timeframe="' . stash('default_timeframe') . '"' : ''; 2 <div class="graph-control" <%== $dt_attr %>> 3 <div class="graph-control-group graph-control-range-group"> 4 <span class="control-group-label" data-control-group="range">Range</span> 5 <div class="input-group input-group-sm range-control" aria-label="Adjust range"> 6 <button 7 class="btn btn-outline-secondary" 8 type="button" 9 data-range-adjustment="decrease" 10 aria-label="Decrease range">−</button> 11 <span 12 class="input-group-text range-label" 13 data-range-label 14 aria-live="polite">1</span> 15 <button 16 class="btn btn-outline-secondary" 17 type="button" 18 data-range-adjustment="increase" 19 aria-label="Increase range">+</button> 20 </div> 21 </div> 22 <div class="graph-control-group"> 23 <span class="control-group-label" data-control-group="timeframe">Timeframe</span> 24 <div class="dropdown timeframe-control"> 25 <button 26 class="btn btn-sm btn-outline-secondary dropdown-toggle timeframe-dropdown-toggle" 27 type="button" 28 data-bs-toggle="dropdown" 29 aria-expanded="false" 30 data-timeframe-dropdown-label>Daily</button> 31 <ul class="dropdown-menu dropdown-menu-end"> 32 % for my $timeframe ( [ hour => 'Hourly' ], [ day => 'Daily' ], [ week => 'Weekly' ], [ month => 'Monthly' ], [ year => 'Yearly' ] ) { 33 <li> 34 <button 35 class="dropdown-item timeframe-button" 36 type="button" 37 data-timeframe="<%= $timeframe->[0] %>" 38 data-timeframe-label="<%= $timeframe->[1] %>"><%= $timeframe->[1] %></button> 39 </li> 40 % } 41 </ul> 42 </div> 43 </div> 44 </div> 45