{% extends "admin/base.html" %}

{% block content %}
<div id="create-droplet-modal" class="reveal-modal" data-reveal>
    <h2 class="text-center">Create Droplet</h2>

    <p></p>
    <a class="close-reveal-modal">&#215;</a>
</div>

<div class="row">
    <br>
    <h1>Hosts</h1>
    <br>
    {% for error in errors %}
        <div class="large-8 large-centered columns">
            <div data-alert class="alert-box alert radius centered text-center">
                <span>{{ error }}</span>
                <a href="#" class="close">×</a>
            </div>
        </div>
    {% endfor %}
    <table id="teamsboard">
        <thead>
            <tr>
                <td><b>ID</b>
                </td>
                <td><b>Status</b>
                </td>
                <td><b>Name</b>
                </td>
                <td><b>IP Address</b>
                </td>
                <td><b>Memory</b>
                </td>
                <td><b>Disk</b>
                </td>
                <td><b>Settings</b>
                </td>
            </tr>
        </thead>
        <tbody>
        {% for host in hosts %}
            <tr>
                <td>{{ host.id }}</td>
                <td>{{ host.status }}</td>
                <td>{{ host.name }}</td>
                <td>{{ host.ip_address }}</td>
                <td>{{ host.memory }} <sub>MB</sub></td>
                <td>{{ host.disk }} <sub>GB</sub></td>
                <td>
                    <span>
                        <i class="fa fa-pencil-square-o"></i>
                        <i class="fa fa-times"></i>
                    </span>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    <a href="#" data-reveal-id="create-droplet-modal" class="radius button">Create New Host</a>
</div>
{% endblock %}

{% block scripts %}
{% endblock %}