{% load i18n %}

<div id="timebuckets" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content" style="width: 500px;">
      <div class="modal-header">
       <h5 class="modal-title">{% trans 'time buckets'|capfirst %}</h5>
       <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">

      <form method="get" action="#">
      <input type="hidden" name="horizonbuckets" id="horizonbuckets"{% if request.user.horizonbuckets %} value="{{request.user.horizonbuckets}}"{% endif %}>
      <input type="hidden" name="horizonunit" id="horizonunit" value="{{request.user.horizonunit}}">
      <input id="horizonoriginal" type="hidden" value="{{request.user.horizonbuckets}}|{{request.user.horizonstart|date:"DATE_FORMAT"}}|{{request.user.horizonend|date:"DATE_FORMAT"}}|{{request.user.horizontype}}|{{request.user.horizonbefore}}|{{request.user.horizonlength}}|{{request.user.horizonunit}}"/>
          <div class="row" style="padding-bottom: 15px">
            <div class="col">
              {% trans 'bucket size'|capfirst %}&nbsp;&nbsp;
              <div class="dropdown" style="display:inline">
                  <button class="form-control d-inline w-auto dropdown-toggle" type="button" name="horizonbuckets1" id="horizonbuckets1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    {% if request.user.horizonbuckets %}{% trans request.user.horizonbuckets %}{% endif %}&nbsp;&nbsp;<span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu" aria-labelledby="horizonbuckets1" id="horizonbucketsul">
                  {% for i in bucketnames %}
                    <li><a class="dropdown-item" onclick="" name="{{ i }}">{% trans i %}</a></li>
                  {% endfor %}
                  </ul>
              </div>
            </div>
          </div>

          <div class="row mb-3">
            <div class="col">
              <input type="radio" class="ms-0 form-check-input align-text-bottom" name="horizontype" value="0"{% if not request.user.horizontype %} checked{% endif %}/>
              &nbsp;&nbsp;{% trans 'from'|capfirst %}&nbsp;
              <input id="horizonstart" name="horizonstart" type="date" class="form-control w-auto d-inline" value="{{request.user.horizonstart|date:"Y-m-d"}}"/>
              &nbsp;{% trans 'till' %}&nbsp;
              <input id="horizonend" name="horizonend" type="date" class="form-control w-auto d-inline" value="{{request.user.horizonend|date:"Y-m-d"}}"/>
           </div>
          </div>

          <div class="row">
            <div class="col">
              <input type="radio" class="ms-0 form-check-input align-text-bottom" id="horizontype" name="horizontype" value="1"{% if request.user.horizontype %} checked{% endif %}/>&nbsp;&nbsp;
              {% trans 'from'|capfirst %}
              <input id="horizonbefore" style="width:4.5em" name="horizonbefore" type="number" class="form-control d-inline arrows ps-2 pe-2" min="0" max="99" value="{{request.user.horizonbefore}}"/>&nbsp;
              {% trans 'before till' %}
              <input id="horizonlength" style="width:4.5em" name="horizonlength" type="number" class="form-control d-inline arrows ps-2 pe-2" min="1" max="99" value="{{request.user.horizonlength}}"/>&nbsp;
              <div class="dropdown" style="display:inline">
                <button style="padding-left: 6px; padding-right:6px" class="form-control w-auto d-inline dropdown-toggle" type="button" name="horizonunit1" id="horizonunit1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  {% if request.user.horizonunit == "day" %}{% trans 'days' %}{% endif %}
                  {% if request.user.horizonunit == "week" %}{% trans 'weeks' %}{% endif %}
                  {% if request.user.horizonunit == "month" %}{% trans 'months' %}{% endif %}
                </button>
                <ul class="dropdown-menu" aria-labelledby="horizonunit1" id="horizonunitul" style="top: auto;">
                  <li><a class="dropdown-item" name="day">{% trans 'days' %}</a></li>
                  <li><a class="dropdown-item" name="week">{% trans 'weeks' %}</a></li>
                  <li><a class="dropdown-item" name="month">{% trans 'months' %}</a></li>
                </ul>
              </div>
              &nbsp;{% trans 'after current date' %}
            </div>
          </div>

      </form>
      </div>
      <div class="modal-footer justify-content-between">
        <input type="submit" id="cancelbutton" role="button" class="btn btn-gray" data-bs-dismiss="modal" value="{% trans 'Cancel'|capfirst %}">
        <input type="submit" id="okbutton" role="button" class="btn btn-primary" value="{% trans 'OK' %}">
      </div>

    </div>
  </div>
</div>