{% extends "starter-template.html" %}
{% block content %}

<form class="form-horizontal">

    <div class="form-group">
        <label for="inputEmail" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="inputEmail" value="{{ user.email }}" readonly>
        </div>
    </div>

    <div class="form-group">
        <label for="inputTerminals" class="col-sm-2 control-label">Terminals</label>
        <div class="col-sm-10">
            {% for terminal in user.terminals %}
            <span class="label label-default">{{ terminal }}</span>
            {% endfor %}
        </div>
    </div>

    <div class="form-group">
        <label for="inputSuppliers" class="col-sm-2 control-label">Suppliers</label>
        <div class="col-sm-10">
            {% for supplier in user.suppliers %}
            <a href="/users/suppliers/delete-confirmation/{{ user._id }}/{{ user.email }}/{{ supplier }}" class="btn btn-default">

                {{ supplier }}
                <span class="glyphicon glyphicon-remove-circle glyphicon-align-right" aria-hidden="true"></span>

            </a>
            {% endfor %}

            <a href="/users/suppliers/add/{{ user._id }}/{{ user.email }}" class="btn btn-primary" role="button">Add a supplier</a>

        </div>
    </div>

    <div class="form-group">
        <label for="inputRoles" class="col-sm-2 control-label">Roles</label>
        <div class="col-sm-10">
            {% for role in user.roles %}
            <a href="/users/roles/delete-confirmation/{{ user._id }}/{{ user.email }}/{{ role }}" class="btn btn-default">
                {{ role }}
                <span class="glyphicon glyphicon-remove-circle glyphicon-align-right" aria-hidden="true"></span>
            </a>
            {% endfor %}

            <a href="/users/roles/add/{{ user._id }}/{{ user.email }}" class="btn btn-primary" role="button">Add a role</a>
        </div>
    </div>

</form>

{% endblock %}