{% extends "theme_one.html" %}
{% load i18n static common crispy_forms_tags utils_tags django_tables2 %}
{% block head_title %}{{ view.page_header }}{% endblock %}
{% block head_media_css %}
    {% if filter %}
        {{ filter.form.media.css }}
    {% endif %}
    {% if dashboard_layout %}
        {{ dashboard_layout.media.css }}
    {% endif %}
    {{ block.super }}
    <style>
        tr[data-status='red'] {
            background-color: rgba(197, 37, 37, 0.5);
        }
        tr[data-status='red2'] {
            background-color: rgb(255, 0, 0);
        }
        tr[data-status='blue'] {
            background-color: rgba(57, 63, 206, 0.5);
        }
        tr[data-status='gray'] {
            background-color: rgba(213, 213, 213, 0.5);
        }
        tr[data-status='dark-gray'] {
            background-color: rgba(105, 105, 105, 0.5);
        }
        tr[data-status='light-green'] {
            background-color: rgba(56, 253, 1, 0.24);
        }
        tr[data-status='light-green2'] {
            background-color: rgb(29, 198, 63);
        }
        tr[data-status='yellow'] {
            background-color: rgba(168, 178, 26, 0.73);
        }
        tr[data-status='gray-blue'] {
            background-color: rgb(93 229 192);
        }
        tr[data-status='bold'] {
            font-weight: bolder;
        }
    </style>
{% endblock %}
{% block body_content %}
    {{ block.super }}
    <div class="container-fluid">

        <div class="d-flex bd-highlight py-2">
            <h4 class="flex-grow-1" style="font-weight: bold">
                {{ view.page_header }}
            </h4>
            <div class="btn-group">
                {% if view.get_back_url %}
                    <a class="btn btn-gray" href="{{ view.get_back_url }}">{% trans 'Back' %}</a>
                {% endif %}
                {% if view.add_url %}
                    <a class="btn btn-green" href="{{ view.add_url }}">{% trans 'Add' %}</a>
                {% endif %}
                {% if view.get_extra_buttons %}
                    {% for btn in view.get_extra_buttons %}
                        <a class="btn {{ btn.color }}" href="{{ btn.url }}">{{ btn.text }}</a>
                    {% endfor %}
                {% endif %}
            </div>

        </div>
        <div class="py-2">
          <span id="reload_countdown"></span>
          <label>
             , Need Reload
            <input type="checkbox" id="need_reload_countdown" onchange="need_reload_changed(this)">
          </label>
        </div>
        {% if filter %}
            <div class="row card-view">
                <form method="get">
                    {% crispy filter.form %}
                </form>
            </div>
        {% endif %}
{#        {% with view.get_mule_credits as muels_data %}#}
{#            <div class="row justify-content-center p-3">#}
{#                <div class="col-auto card p-3 text-center m-1">#}
{#                    <div>Sum Mule Coins</div>#}
{#                    <div>{{ muels_data.sum_mule_credits }}</div>#}
{#                </div>#}
{#                <div class="col-auto card p-3 text-center m-1">#}
{#                    <div>Sum Produced Coins In Last 24 Hours</div>#}
{#                    <div>{{ muels_data.sum_produced_coin_24_hours }}</div>#}
{#                </div>#}
{#                <div class="col-auto card p-3 text-center m-1">#}
{#                    <div>Count Done Workers In 24 Hours</div>#}
{#                    <div>{{ muels_data.count_done_worker_in_24_hours }}</div>#}
{#                </div>#}
{#                <div class="col-auto card p-3 text-center m-1">#}
{#                    <div>Average Done Workers In 24 Hours</div>#}
{#                    <div>{{ muels_data.average_done_worker_in_24_hours }}</div>#}
{#                </div>#}
{#            </div>#}
{#        {% endwith %}#}
        {% with view.get_card_data as cards_data %}
          <div class="row justify-content-center p-3">
          {% for item in cards_data %}
            <div class="col-auto card p-3 text-center m-1 {{ item.box_css_class }}">
                  <div>{{ item.name }}</div>
                  <div>{{ item.info }}</div>
              </div>
          {% endfor %}
          </div>
        {% endwith %}

        {% if form %}
            {% include 'generic_views/partial/form_view.parial.html' %}
        {% endif %}

        {% if table %}
            <div class="row card py-2 table-responsive">
                {% include 'generic_views/partial/table_index_count.html' %}
                {% render_table table 'generic_views/partial/list_view_table.partial.html' %}
            </div>
        {% endif %}
    </div>
{% endblock body_content %}
{% block body_js %}
    {{ block.super }}
    {% if dashboard_layout %}
        {{ dashboard_layout.media.js }}
    {% endif %}
    {% if filter %}
        {{ filter.form.media.js }}
    {% endif %}
    <script>
      let need_reload = getCookie('need_reload_countdown');
      document.getElementById('need_reload_countdown').checked = JSON.parse(need_reload);
      (function countdown(remaining) {
        if (remaining === 0)
          {# location.reload(true); #}
        document.getElementById('reload_countdown').innerHTML = 'reload in : '+remaining + ' second';
        setTimeout(function () {
          if (document.getElementById('need_reload_countdown').checked){
            countdown(remaining - 1);
          }else {
            countdown(remaining);
          }
        }, 1000);
      })(30);

      function need_reload_changed(field){
        if (field.checked){
          setCookie('need_reload_countdown',true,100)
        }else{
          setCookie('need_reload_countdown',false,100)
        }
      }
      function setCookie(cname, cvalue, exdays) {
        const d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        let expires = "expires=" + d.toUTCString();
        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
      }
      function getCookie(cname) {
        let name = cname + "=";
        let decodedCookie = decodeURIComponent(document.cookie);
        let ca = decodedCookie.split(';');
        for (let i = 0; i < ca.length; i++) {
          let c = ca[i];
          while (c.charAt(0) == ' ') {
            c = c.substring(1);
          }
          if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
          }
        }
        return "";
      }
    </script>
{% endblock %}