[% DEFAULT width = "w-full" %]
<select class="[% width %]" name="[% name | html %]" onchange="if(this.value == 'custom') { showElement('[% name | html %]_custom_timeperiod') } else { hideElement('[% name | html %]_custom_timeperiod') }">
  [% IF current %]
  <option value="current"[% IF      selected_timeperiod == 'current'      %] selected[% END %]>Current timerange</option>
  [% END %]
  <option value="today"[% IF        selected_timeperiod == 'today'        %] selected[% END %]>Today</option>
  <option value="last24hours"[% IF  selected_timeperiod == 'last24hours'  %] selected[% END %]>Last 24 Hours</option>
  <option value="yesterday"[% IF    selected_timeperiod == 'yesterday'    %] selected[% END %]>Yesterday</option>
  <option value="thisweek"[% IF     selected_timeperiod == 'thisweek'     %] selected[% END %]>This Week</option>
  <option value="last7days"[% IF    selected_timeperiod == 'last7days'    %] selected[% END %]>Last 7 Days</option>
  <option value="lastweek"[% IF     selected_timeperiod == 'lastweek'     %] selected[% END %]>Last Week</option>
  <option value="thismonth"[% IF    selected_timeperiod == 'thismonth'    %] selected[% END %]>This Month</option>
  <option value="last31days"[% IF   selected_timeperiod == 'last31days'   %] selected[% END %]>Last 31 Days</option>
  <option value="lastmonth"[% IF    selected_timeperiod == 'lastmonth'    %] selected[% END %]>Last Month</option>
  <option value="last3months"[% IF  selected_timeperiod == 'last3months'  %] selected[% END %]>Last 3 Months</option>
  <option value="last6months"[% IF  selected_timeperiod == 'last6months'  %] selected[% END %]>Last 6 Months</option>
  <option value="last12months"[% IF selected_timeperiod == 'last12months' %] selected[% END %]>Last 12 Months</option>
  <option value="thisyear"[% IF     selected_timeperiod == 'thisyear'     %] selected[% END %]>This Year</option>
  <option value="lastyear"[% IF     selected_timeperiod == 'lastyear'     %] selected[% END %]>Last Year</option>
  [% IF custom %]
  <option value="custom"[% IF selected_timeperiod == 'custom' %] selected[% END %]>Custom</option>
  [% END %]
</select>
[% IF custom %]
<div class="flexrow flex-nowrap pt-2" [% IF selected_timeperiod != 'custom' %]style="display:none"[% END %] id="[% name | html %]_custom_timeperiod">
  <div class="flexcol flex-nowrap">
    <div class="flex flex-nowrap gap-1 w-fit">
      <span class="w-8 inline-flex items-center">Start</span>
      [% IF custom == 2 %]
        [% dt1 = prefer_date_if_timestamp(t1) %]
        <input type="text" value="[% dt1 | html %]" id="t1" name="t1" class="date_input cal_popup_range cal_popup_select cal_custom w-36" onkeyup="verify_time(this.id)">
        <div><i class="uil uil-schedule text-lg cal_icon cal_popup for_t1" title="pick date"></i></div>
      [% ELSE %]
        <input type="text" value="[% IF format_date(t1, '%S') == "00" %][% format_date(t1, '%Y-%m-%d %H:%M') %][% ELSE %][% format_date(t1, '%Y-%m-%d %H:%M:%S') %][% END %]" id="t1" name="t1" class="date_input cal_popup_range cal_popup_select w-36" onkeyup="verify_time(this.id)">
        <div><i class="uil uil-schedule text-lg cal_icon cal_popup for_t1" title="pick date"></i></div>
      [% END %]
    </div>
    <div class="flex flex-nowrap gap-1 w-fit">
      <span class="w-8 inline-flex items-center">End</span>
      [% IF custom == 2 %]
        [% dt2 = prefer_date_if_timestamp(t2) %]
        <input type="text" value="[% dt2 | html %]" id="t2" name="t2" class="date_input cal_popup_range cal_popup_select cal_custom w-36" onkeyup="verify_time(this.id)">
        <div><i class="uil uil-schedule text-lg cal_icon cal_popup for_t2" title="pick date"></i></div>
      [% ELSE %]
        <input type="text" value="[% IF format_date(t2, '%S') == "00" %][% format_date(t2, '%Y-%m-%d %H:%M') %][% ELSE %][% format_date(t2, '%Y-%m-%d %H:%M:%S') %][% END %]" id="t2" name="t2" size="20" class="date_input cal_popup_range cal_popup_select w-36" onkeyup="verify_time(this.id)">
        <div><i class="uil uil-schedule text-lg cal_icon cal_popup for_t2" title="pick date"></i></div>
      [% END %]
    </div>
  </div>

    [% IF show_hint %]
      <table class="borderDefault border">
        <tr>
          <th colspan="2">Examples for custom timeranges</th>
        </tr>
        <tr>
          <td>fixed dates</td>
          <td>2019-09-17 16:30:00</td>
        </tr>
        <tr>
          <td>absolute names</td>
          <td>yesterday / today</td>
        </tr>
        <tr>
          <td>simple arithmetics</td>
          <td>now - 2d</td>
        </tr>
        <tr>
          <td colspan="2"><a class="link" target="_blank" href="https://thruk.org/documentation/timedefinitions.html">find more examples online<i class="uil uil-external-link-alt text-sm"></i></a></td>
        </tr>
      </table>
    [% END %]
</div>

[% END %]