{% 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 }}
              <button type="submit" class="pure-button pure-button-primary">Submit</button>
            </div>
          {% endif %}
        {% endfor %}
        <ul>
        {% for field, errors in form.errors.items() %}
            <li>{{ form[field].label }}: {{ ', '.join(errors) }}</li>
        {% endfor %}
        </ul>
        
    </form>
  </div>

  <div id="nodes" class="pure-u-1 section">
    <h2 class="center">Find a Node</h2>
    <div class="center" id="filters">
      <form>
        <span>
          <label for="chainSelect">Chain:</label>
          <select name="chain" id="chainSelect">
            <option value="monero" autofocus>Monero</option>
            <option value="wownero">Wownero</option>
          </select>
        </span>

        <span>
          <label for="networkSelect">Network:</label>
          <select name="network" id="networkSelect">
            <option value="mainnet" autofocus>Mainnet</option>
            <option value="testnet">Testnet</option>
            <option value="stagenet">Stagenet</option>
          </select>
        </span>
        
        <span>
          <label for="cors">Web (CORS):</label>
          <input type="checkbox" name="cors" id="cors">
        </span>

        <span>
          <label for="onion">Onion:</label>
          <input type="checkbox" name="onion" id="onion">
        </span>

        <span>
          <input type="submit" value="Filter" class="pure-button pure-pink">
        </span>

        <span>
          <a href="/"><input type="button" value="Reset" class="pure-button pure-grey"></a>
        </span>
      </form>
    </div>
    {% if nodes %}
    <div class="xmrnodes">
      <p class="center">
        {% if web_compatible %}
        <strong>
          Web compatible means the node is run in such a way that it allows web clients to access their APIs (CORS headers allow all and secure HTTP / TLS terminated).
          <br>
          The more nodes there are running with these settings the more robust web clients will be in the future.
        </strong>
        <br><br>
        {% endif %}
        <a href="{{ url_for('haproxy', chain=request.args.get('chain'), network=request.args.get('network'), cors=request.args.get('cors'), onion=request.args.get('onion')) }}">Download HAProxy config</a><br /><br />
        Tracking {{ nodes_all }} {{ nettype }} {{ crypto | capitalize }} nodes in the database.
        <br>
        Of those, {{ nodes_unhealthy }} nodes failed their last check-in (unresponsive to ping or over 500 blocks away from highest reported block).
      </p>
      <p class="center">Showing {{ nodes | length }} nodes.
        {% if 'all' not in request.args %}
        <a href="{% if request.args %}{{ request.url }}&{% else %}?{% endif %}all=true">Show All</a>
        {% else %}
        <a href="{{ request.path }}?{{ request.args | pop_arg('all') }}">Show Active</a>
        {% endif %}
      </p>
      <br>
      <table class="pure-table pure-table-horizontal pure-table-striped js-sort-table">
        <thead>
          <tr>
            <th class="js-sort-string">URL</th>
            <th class="js-sort-number">Height</th>
            <th class="js-sort-none">Available</th>
            <th class="js-sort-none">Web<br/>Compatible</th>
            <th class="js-sort-none">Network</th>
            <th class="js-sort-none">Date Added</th>
            <th class="js-sort-none">Last Checked</th>
            <th class="js-sort-none">History</th>
          </tr>
        </thead>
        <tbody>
          {% for node in nodes %}
          <tr class="js-sort-table">
            <td>{% if node.is_tor %}<img src="/static/images/tor.svg" width="15px">{% endif %}<span class="nodeURL">{{ node.url }}</span></td>
            <td>{{ node.last_height }}</td>
            <td>
              {% if node.available %}
                <span class="dot glowing-green"></span>
              {% else %}
                <span class="dot glowing-red""></span>
              {% endif %}
            </td>
            <td>
              {% if node.web_compatible %}
              <img src="/static/images/success.svg" class="filter-green" width=16px>
              {% else %}
              <img src="/static/images/error.svg" class="filter-red" width=16px>
              {% endif %}
            </td>
            <td>{{ node.nettype }}</td>
            <td>{{ node.datetime_entered | humanize }}</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 class="center">No nodes in the database yet...</p>
    {% endif %}
  </div>

</div>

<script src="/static/js/sort-table.min.js"></script>

{% endblock %}