{% extends "base.html" %}
{% set active_page = "rules" %}
{% block stylesheet %}
{% endblock %}

{% block rules %}
<div class="container">
  <div class="row mb-4 border-bottom mb-5">
    <div class="col-md-12 text-center">
        <h1 class="display-4 align-items-center d-flex justify-content-center">
          <span>Rule Manager</span>
        </h1>
        <p class="lead">Upload/Download rules</p>
    </div>
  </div>

  <form class="mb-5">
    <div class="row align-items-center">
      <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="input-group">
          <div class="custom-file uploadFile">
            <input type="file" class="uploadFile__input" id="rule_upload" name="rule_upload" accept="application/json">
            <label for="rule_upload" class="uploadFile__label">Upload JSON</label>
          </div>
        </div>
      </div>
    </div>
  </form>

  <div class="card depth-1 mb-5">
    <div class="card-body p-0">
      <div class="row">
        <div class="col-md-12">
          <table class="table text-left table-borderless table-hover mb-0">
            <thead class="thead-light">
              <tr>
                <th scope="col">#</th>
                <th scope="col">Rule Name</th>
                <th scope="col">Created at</th>
                <th scope="col">&nbsp</th>
              </tr>
            </thead>
            <tbody>
              {% if saved_rules|length > 0 %}
                {% for rule in saved_rules %}
                  <tr>
                    <th width="10%" scope="row">{{ loop.index }}</th>
                    <td width="40%">
                      <a data-toggle="collapse" href="#{{ rule.rule_id }}">
                        {{ rule.rule_name }}
                      </a>
                    </td>
                    <td width="20%">{{ rule.created_at }}</td>
                    <td width="15%"><button class="btn btn-sm btn-outline-primary" onclick="onRuleDownload(this)">Download</button><a data-rule-name="{{ rule.rule_name }}" data-rule-options="{{ rule.rule_options }}" style="display:none"></a></td>
                  </tr>
                  <tr id="{{ rule.rule_id }}" class="collapse">
                    <td colspan="4"><pre>{{ rule.rule_options|pretty }}</pre></td>
                  </tr>
                {% endfor %}
              {% else %}
                <tr>
                  <td colspan="4" style="text-align: center">No rules saved.</td>
                </tr>
              {% endif %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block javascript %}
<script type="text/javascript" src="{{ url_for('static', filename='js/rules.js') }}"></script>
{% endblock %}