{% extends "base.html" %}

{% block content %}
<div class="row data justify-content-between">
  <div class="col col-4">
    <h3>policy</h3>
    <footer class="blockquote-footer">
      for more info see <a href="https://tailscale.com/kb/1337/acl-syntax" target="_blank">tailscale docs</a>
    </footer>
  </div>
  <div class="col col-4">
    <div class="float-right">
      last update:
      <span data-toggle="tooltip"
        data-placement="right"
        title="{{ policy.updatedAt | fmt_datetime }}">
        {{policy.updatedAt | htime_dt }}
      </span>
      <div>
        <button type="button" class="btn btn-outline-primary btn-sm plain"><a class="plain" href="{{ url_for('main.policy', action='view') }}" target="_blank">View</a></button>
        <button type="button" class="btn btn-outline-primary btn-sm plain"><a class="plain" href="{{ url_for('main.policy', action='download') }}">Download</a></button>
        <button type="button" class="btn btn-outline-primary btn-sm plain" data-toggle="modal" data-target="#uploadACL">Upload</button>
      </div>
    </div>
  </div>
</div>
<hr>
<div class="row">
  <div class="col col-6">
      <div class="row">
          <div class="col col-4"><h5>source</h5></div>
          <div class="col col-8"><h5>destination</h5></div>
      </div>
      {% for acl in policy.policy['acls'] %}
      <div class="row data">
          <div class="col col-4">
              {{ ','.join(acl['src']) }}</div>
          <div class="col col-8">{{ ',<br />'.join(acl['dst']) | safe }}</div>
      </div>
      {% endfor %}
  </div>

  <div class="col col-6">
    <!-- groups -->
    <div id="groups">
      <div class="card">
        <div class="card-header" id="groupsHeading">
          <h5 class="mb-0">
            <button class="btn btn-link" data-toggle="collapse" data-target="#groupsContent" aria-expanded="true" aria-controls="groupsContent">
              groups
            </button>
          </h5>
        </div>
        <div id="groupsContent" class="collapse show" aria-labelledby="groupsHeading" data-parent="#groups">
          <div class="card-body">
            {% for group,users in policy.policy['groups'].items() %}
            <div class="row data">
                <div class="col col-6">
                    {{ group }}
                </div>
                <div class="col col-6">
                    {{ ", ".join(users) }}
                </div>
            </div>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
    <!-- hosts -->
    <div class="hosts">
      <div class="card">
        <div class="card-header" id="hostsHeading">
          <h5 class="mb-0">
            <button class="btn btn-link" data-toggle="collapse" data-target="#hostsContent" aria-expanded="true" aria-controls="hostsContent">
              hosts
            </button>
          </h5>
        </div>
        <div id="hostsContent" class="collapse" aria-labelledby="hostsHeading" data-parent="#hosts">
          <div class="card-body">
            {% for host, value in policy.policy['hosts'].items() %}
            <div class="row data">
                <div class="col col3">
                    {{ host }}
                </div>
                <div class="col col3">
                    {{ value }}
                </div>
            </div>
                {% endfor %}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- upload acl modal -->
<div class="modal fade" id="uploadACL" tabindex="-1" role="dialog" aria-labelledby="uploadACL" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="renameModalLabel">upload ACL</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          <div class="form-check form-check-inline">
              <input class="form-check-input" type="file" name="upload" id="upload">
          </div>
          <div>
            <span id="output"></span>
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" onClick="uploadACL(this);">Upload</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}