{% load i18n %}

<!-- // adjust time -->
<p class="aa-timezones-adjust-time text-end">
    <button id="btnadjust" class="btn btn-info d-none" onclick="showAdjust();">
        {% translate "Adjust time" %}
    </button>

    <button id="btnclear" class="btn btn-danger d-none" onclick="reloadBasePage();">
        {% translate "Remove" %}
    </button>

    <button id="btnshowcurrent" class="btn btn-primary d-none" onclick="switchto(0);">
        {% translate "Switch to current time" %}
    </button>

    <button id="btnshowfixed" class="btn btn-primary d-none" onclick="switchto(1);">
        {% translate "Switch to adjusted time" %}
    </button>
</p>

<div id="adjust" class="d-none eve-online-time-zones-time-adjust pt-4 border-top border-light">
    <div class="text-end clearfix">
        <form class="float-end text-end eve-online-time-zones-time-adjust-form mb-4 fw-bold">
            <div class="text-start eve-online-time-zones-time-adjust-form-header">
                {% translate "Set time to be in" %}
            </div>

            <div class="d-flex flex-row align-items-center flex-wrap">
                <div class="input-group me-3 my-1 me-sm-2 w-auto">
                    <select class="form-select" id="tind">
                        <option>0</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                        <option>6</option>
                        <option>7</option>
                    </select>
                    <div class="input-group-text">{% translate "Days" %}</div>
                </div>

                <div class="input-group me-3 my-1 me-sm-2 w-auto">
                    <select class="form-select" id="tinh">
                        <option>0</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                        <option>6</option>
                        <option>7</option>
                        <option>8</option>
                        <option>9</option>
                        <option>10</option>
                        <option>11</option>
                        <option>12</option>
                        <option>13</option>
                        <option>14</option>
                        <option>15</option>
                        <option>16</option>
                        <option>17</option>
                        <option>18</option>
                        <option>19</option>
                        <option>20</option>
                        <option>21</option>
                        <option>22</option>
                        <option>23</option>
                    </select>
                    <div class="input-group-text">{% translate "Hours" %}</div>
                </div>

                <div class="input-group me-3 my-1 me-sm-2 w-auto">
                    <select class="form-select" id="tinm">
                        <option>0</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                        <option>6</option>
                        <option>7</option>
                        <option>8</option>
                        <option>9</option>
                        <option>10</option>
                        <option>11</option>
                        <option>12</option>
                        <option>13</option>
                        <option>14</option>
                        <option>15</option>
                        <option>16</option>
                        <option>17</option>
                        <option>18</option>
                        <option>19</option>
                        <option>20</option>
                        <option>21</option>
                        <option>22</option>
                        <option>23</option>
                        <option>24</option>
                        <option>25</option>
                        <option>26</option>
                        <option>27</option>
                        <option>28</option>
                        <option>29</option>
                        <option>30</option>
                        <option>31</option>
                        <option>32</option>
                        <option>33</option>
                        <option>34</option>
                        <option>35</option>
                        <option>36</option>
                        <option>37</option>
                        <option>38</option>
                        <option>39</option>
                        <option>40</option>
                        <option>41</option>
                        <option>42</option>
                        <option>43</option>
                        <option>44</option>
                        <option>45</option>
                        <option>46</option>
                        <option>47</option>
                        <option>48</option>
                        <option>49</option>
                        <option>50</option>
                        <option>51</option>
                        <option>52</option>
                        <option>53</option>
                        <option>54</option>
                        <option>55</option>
                        <option>56</option>
                        <option>57</option>
                        <option>58</option>
                        <option>59</option>
                    </select>
                    <div class="input-group-text">{% translate "Minutes" %}</div>
                </div>

                <div>
                    <button class="btn btn-info" onclick="setTimeToBeIn(jQuery('#tind').val(), jQuery('#tinh').val(), jQuery('#tinm').val()); return false;">{% translate "Set time" %}</button>
                </div>
            </div>
        </form>
    </div>

    <div class="text-end clearfix">
        <form class="float-end text-end eve-online-time-zones-time-adjust-form mb-4 fw-bold">
            <div class="text-start eve-online-time-zones-time-adjust-form-header">
                {% translate "Set time to be at a specific time and date" %}
            </div>

            <div class="d-flex flex-row align-items-center flex-wrap">
                <div class="input-group me-3 my-1 me-sm-2 w-auto">
                    <select class="form-select" id="tathour">
                        <option>00</option>
                        <option>01</option>
                        <option>02</option>
                        <option>03</option>
                        <option>04</option>
                        <option>05</option>
                        <option>06</option>
                        <option>07</option>
                        <option>08</option>
                        <option>09</option>
                        <option>10</option>
                        <option>11</option>
                        <option>12</option>
                        <option>13</option>
                        <option>14</option>
                        <option>15</option>
                        <option>16</option>
                        <option>17</option>
                        <option>18</option>
                        <option>19</option>
                        <option>20</option>
                        <option>21</option>
                        <option>22</option>
                        <option>23</option>
                    </select>
                    <div class="input-group-text">:</div>

                    <select class="form-select" id="tatminute">
                        <option>00</option>
                        <option>01</option>
                        <option>02</option>
                        <option>03</option>
                        <option>04</option>
                        <option>05</option>
                        <option>06</option>
                        <option>07</option>
                        <option>08</option>
                        <option>09</option>
                        <option>10</option>
                        <option>11</option>
                        <option>12</option>
                        <option>13</option>
                        <option>14</option>
                        <option>15</option>
                        <option>16</option>
                        <option>17</option>
                        <option>18</option>
                        <option>19</option>
                        <option>20</option>
                        <option>21</option>
                        <option>22</option>
                        <option>23</option>
                        <option>24</option>
                        <option>25</option>
                        <option>26</option>
                        <option>27</option>
                        <option>28</option>
                        <option>29</option>
                        <option>30</option>
                        <option>31</option>
                        <option>32</option>
                        <option>33</option>
                        <option>34</option>
                        <option>35</option>
                        <option>36</option>
                        <option>37</option>
                        <option>38</option>
                        <option>39</option>
                        <option>40</option>
                        <option>41</option>
                        <option>42</option>
                        <option>43</option>
                        <option>44</option>
                        <option>45</option>
                        <option>46</option>
                        <option>47</option>
                        <option>48</option>
                        <option>49</option>
                        <option>50</option>
                        <option>51</option>
                        <option>52</option>
                        <option>53</option>
                        <option>54</option>
                        <option>55</option>
                        <option>56</option>
                        <option>57</option>
                        <option>58</option>
                        <option>59</option>
                    </select>
                </div>

                <div class="input-group me-3 my-1 me-sm-2 w-auto">
                    <select class="form-select" id="tatzone">
                        <option value="">{% translate "Local time" %}</option>
                        <option value="ETC/UTC" selected>
                            {% translate "EVE time" %}
                        </option>

                        {% for timezone in timezones %}
                            <option value="{{ timezone.timezone.timezone_name }}">
                                {{ timezone.panel_name }}
                            </option>
                        {% endfor %}
                    </select>
                </div>

                <label class=" me-3 my-1 me-sm-2 w-auto"> - </label>

                <div class="input-group me-3 my-1 me-sm-2 w-auto">
                    <select class="form-control" id="tatyear"></select>
                    <div class="input-group-text">-</div>

                    <select class="form-select" id="tatmonth">
                        <option value="01">{% translate "January" %}</option>
                        <option value="02">{% translate "February" %}</option>
                        <option value="03">{% translate "March" %}</option>
                        <option value="04">{% translate "April" %}</option>
                        <option value="05">{% translate "May" %}</option>
                        <option value="06">{% translate "June" %}</option>
                        <option value="07">{% translate "July" %}</option>
                        <option value="08">{% translate "August" %}</option>
                        <option value="09">{% translate "September" %}</option>
                        <option value="10">{% translate "October" %}</option>
                        <option value="11">{% translate "November" %}</option>
                        <option value="12">{% translate "December" %}</option>
                    </select>
                    <div class="input-group-text">-</div>

                    <select class="form-select" id="tatday">
                        <option>01</option>
                        <option>02</option>
                        <option>03</option>
                        <option>04</option>
                        <option>05</option>
                        <option>06</option>
                        <option>07</option>
                        <option>08</option>
                        <option>09</option>
                        <option>10</option>
                        <option>11</option>
                        <option>12</option>
                        <option>13</option>
                        <option>14</option>
                        <option>15</option>
                        <option>16</option>
                        <option>17</option>
                        <option>18</option>
                        <option>19</option>
                        <option>20</option>
                        <option>21</option>
                        <option>22</option>
                        <option>23</option>
                        <option>24</option>
                        <option>25</option>
                        <option>26</option>
                        <option>27</option>
                        <option>28</option>
                        <option>29</option>
                        <option>30</option>
                        <option>31</option>
                    </select>
                </div>

                <div>
                    <button
                        class="btn btn-info"
                        onclick="setDateAndTime(`${jQuery('#tatyear').val()}-${jQuery('#tatmonth').val()}-${jQuery('#tatday').val()} ${jQuery('#tathour').val()}:${jQuery('#tatminute').val()}`, jQuery('#tatzone').val()); return false;"
                    >
                        {% translate "Set time" %}
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
