{% extends "base.html" %}
{% block content %}
<h3>
    <span id="givenName">
    {{node.givenName}}
    </span>
    <a href="#" data-toggle="modal" data-target="#renameModal">
        <span data-toggle="tooltip"
            data-placement="right"
            title="rename node">
            <i class="fas fa-edit h6"></i>
        </span>
    </a>
</h3>
<hr>
<p></p>
<div class="row">
    <div class="col col-3 float-left">
        <strong>status</strong>
    </div>
    <div class="col col-8 float-left">
        {% if node.online %}
        <span class="badge badge-pill badge-success">online</span>
        {% else %}
        <span class="badge badge-pill badge-danger">offline</span>
        {% endif %}
        (<span data-toggle="tooltip" data-placement="right" title="{{ node.lastSeen | fmt_datetime }}">
            {{ node.lastSeen | htime_dt }}
        </span>)
    </div>
</div>
<div class="row">
    <div class="col col-3 float-left">
        <strong>registered</strong>
    </div>
    <div class="col col-8 float-left">
        <span data-toggle="tooltip" data-placement="right" title="{{ node.createdAt | fmt_datetime }}">
            {{ node.createdAt | htime_dt }}
            <span class="badge badge-pill badge-warning">
            {{ node.registerMethod.name }}
            </span>

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

<div class="row">
    <div class="col col-3 float-left">
        <strong>expire</strong>
    </div>
    <div class="col col-8 float-left">
        <span data-toggle="tooltip" data-placement="right" title="{{ node.expiry | fmt_datetime }}">
            {{ node.expiry | htime_dt }}
        </span>
    {% if node.expireDate and not node.expired %}
    <a href="{{ url_for('rest.expireNode', nodeId=node.id) }}">
        <span data-toggle="tooltip" data-placement="right" title="expire/disconnect node">
            <i class="fas fa-plug"></i>
        </span>
    </a>
    {% endif %}
    </div>
</div>


<div class="row">
    <div class="col col-3 float-left">
        <strong>owner</strong>
    </div>
    <div class="col col-8 float-left">
        <a href='{{ url_for("main.user", userName=node.user.name) }}' class="plain">{{ node.user.name }}</a>
    </div>
</div>
<p></p>

<!-- ADDRESSES -->
<h5>addresses</h5>
{% for ip in node.ipAddresses %}
<div class="row data">
    <div class="col col-3">
        <span class="address copy"
            value="{{ ip }}">
        {{ ip }}
        </spanundefined>
    </div>
</div>
{% endfor %}
<p></p>

<!-- TAGS -->
<h5>tags</h5>
<div class="row data">
    <div class="col col-3 float-left">
        <strong>
            announced
        </strong>
    </div>
    <div class="col col-6 float-left">
        {% if node.validTags %}
            {% for tag in node.validTags %}
            <span class="badge badge-pill badge-warning">
               {{ tag }}
            </span>
            {% endfor %}
        {% else %}
            None
        {% endif %}
    </div>
</div>
<div class="row data">
    <div class="col col-3 float-left">
        <strong>forced</strong>
    </div>
    <div class="col col-6 float-left">
        {% if node.forced %}
            {% for tag in node.forcedTags %}
            <h3><span class="badge badge-pill badge-primary">
               {{ tag }}
            </span></h3>
            {% endfor %}
        {% else %}
            None
        {% endif %}
    </div>
</div>

<!-- KEYS -->
<p></p>
<h5>keys</h5>

<div class="row data">
    <div class="col col-3 float-left">
        <strong>machineKey</strong>
    </div>
    <div class="col col-8 float-left">
        <code>{{ node.machineKey }}</code>
    </div>
</div>

<div class="row data">
    <div class="col col-3 float-left">
        <strong>nodeKey</strong>
    </div>
    <div class="col col-8 float-left">
        <code>{{ node.nodeKey }}</code>
    </div>
</div>

<div class="row data">
    <div class="col col-3 float-left">
        <strong>discoKey</strong>
    </div>
    <div class="col col-8 float-left">
            <code>{{ node.discoKey }}</code>
    </div>
</div>
<p></p>

<!-- ROUTES -->
<h5>routes
{% if isExitNode %}
<span class="small badge-pill badge-primary">Exit Node</span>
{% endif %}
</h5>
{% if routes %}
<div class="row">
    <div class="col col-3 float-left">
        <strong>prefix</strong>
    </div>
    <div class="col col-3 float-left">
        <strong>enabled</strong>
    </div>
    <div class="col col-3 float-left">
        <strong>primary</strong>
    </div>
</div>
{% for route in routes | sort(attribute='prefix') %}
<div class="row data">
    <div class="col col-3 float-left">
        {{ route.prefix }}
    </div>
    <div class="col col-3 float-left">
        {{ route.enabled | fancyBool | safe }}
    </div>
    <div class="col col-3 float-left">
        {{ route.isPrimary | fancyBool | safe }}
    </div>
</div>
{% endfor %}
{% else %}
<div class="row">
    <div class="col col-9 text-center">
        <h3>No routes announced</h3>
    </div>
</div>
{% endif %}

<!-- rename modal -->
<!-- Modal -->
<div class="modal fade" id="renameModal" tabindex="-1" role="dialog" aria-labelledby="renameModal" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="renameModalLabel">Rename node</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <input type="text" name="newName" id="newName" value="{{ node.givenName}}">
        </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="renameNode(id={{node.id}})">Save changes</button>
        </div>
      </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    $(function () {
        $('.address.copy').on('click', function() {
            copyToClipboard(this)
        })
    })
</script>
{% endblock %}