{% extends 'base.html' %}

{% block content %}

<div id="index" class="container">

  <div id="addnode" class="pure-g center section">
    <div class="title pure-u-1">
      <h2>Add A Node</h2>
    </div>
    <form method="POST" action="{{ url_for('add') }}" class="pure-form pure-u-1">
        {{ form.csrf_token }}
        {% for f in form %}
          {% if f.name != 'csrf_token' %}
            <div class="form-group">
              {{ f.label }}
              {{ f }}
            </div>
          {% endif %}
        {% endfor %}
        <ul>
        {% for field, errors in form.errors.items() %}
            <li>{{ form[field].label }}: {{ ', '.join(errors) }}</li>
        {% endfor %}
        </ul>
        <button type="submit" class="pure-button pure-button-primary">Submit</button>
    </form>
  </div>

  <div id="nodes" class="pure-u-1 section">
    <h2 class="center">Find a Node</h2>
    <div class="center" id="filters">
      <a href="{% if 'crypto' in request.args %}{{ request.url }}&{% else %}/?{% endif %}nettype=mainnet"><button class="pure-button search-btn">Mainnet</button></a>
      <a href="{% if 'crypto' in request.args %}{{ request.url }}&{% else %}/?{% endif %}nettype=testnet"><button class="pure-button search-btn">Testnet</button></a>
      <a href="{% if 'crypto' in request.args %}{{ request.url }}&{% else %}/?{% endif %}nettype=stagenet"><button class="pure-button search-btn">Stagenet</button></a>
      {% if 'onion' not in request.args %}<a href="{% if 'nettype' in request.args or 'crypto' in request.args %}{{ request.url }}&{% else %}/?{% endif %}onion=true"><button class="pure-button search-btn"><img src="/static/images/tor.svg" width=15px> Onion</button></a>{% endif %}
      <a href="/?crypto=wownero"><button class="pure-button search-btn wownero"><img src="/static/images/wownero.svg" width=50px></button></a>
      <a href="/"><button class="pure-button search-btn button-warning" style="border: dashed red;">x Clear</button></a>
    </div>
    <br>
    {% if nodes %}
    <div class="xmrnodes">
      <p class="center">Currently tracking {{ nodes | length }} nodes in the database. Of those, {{ nodes_unhealthy | length }} nodes failed their last check-in.</p>
      <br>
      <table class="pure-table pure-table-horizontal pure-table-striped">
        <thead>
          <tr>
            <th>URL</th>
            <th>Available</th>
            <th>Network</th>
            <th>Height</th>
            <th>Last Checked</th>
            <th>History</th>
          </tr>
        </thead>
        <tbody>
          {% for node in nodes %}
          <tr>
            <td>{% if node.is_tor %}<img src="/static/images/tor.svg" width="15px">{% endif %}{{ node.url }}</td>
            <td>
              {% if node.available %}
                <span class="dot glowing-green"></span>
              {% else %}
                <span class="dot glowing-red""></span>
              {% endif %}
            </td>
            <td>{{ node.nettype }}</td>
            <td>{{ node.last_height }}</td>
            <td>{{ node.datetime_checked | humanize }}</td>
            <td>{% for hc in node.healthchecks %}
              {% if loop.index > loop.length - 6 %}
              <span class="dot glowing-{% if hc.health %}green{% else %}red{% endif %}"></span>
              {% endif %}
            {% endfor %}
            </td>
          </tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
      <p>No nodes in the database yet...</p>
    {% endif %}
  </div>

</div>

{% endblock %}