{% extends "layout.html" %}

{% block body %}
    <h3>Account management for {{current_user.email}}</h3>
    <div class="panel panel-default">
        <div class="panel-heading">Password</div>
        <div class="panel-body">
        	<a href="{{ url_for('security.change_password') }}" id="change_password" class="btn btn-primary " role="button">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Change
            </a>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">Vehicles</div>
        <div class="panel-body">
            <a href="{{ url_for('create_vehicle') }}" id="create_vehicle" class="btn btn-primary " role="button">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> create
            </a>
        </div>
        <table class="table table-striped table-bordered">
            <tbody>
                <tr>
                    <th>
                        Vehicle
                    </th>
                    <th>
                        Info
                    </th>
                    <th>
                        Actions
                    </th>
                </tr>
                {% for vehicle in current_user.vehicles %}
                    <tr>
                        <td>
                            {{ vehicle.name }}
                        </td>
                        <td>
                            {{ vehicle.pitstops | length }} pitstops<br />
                            {{ vehicle.services | length }} special expenses<br />
                            {{ vehicle.consumables | length }} consumables
                        </td>
                        <td>
                            <a href="{{ url_for('create_service_for_vehicle', vid=vehicle.id) }}" id="pitstop_{{loop.index}}" class="btn btn-primary " role="button">
                                <span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> add service
                            </a>
                            <a href="{{ url_for('select_consumable_for_new_pitstop', vid=vehicle.id) }}" id="pitstop_{{loop.index}}" class="btn btn-primary " role="button">
                                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> add pitstop
                            </a>
                            <a href="{{ url_for('edit_vehicle', vid=vehicle.id) }}" id="edit_vehicle_{{loop.index}}" class="btn btn-primary " role="button">
                                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> edit
                            </a>
                            {% if current_user.vehicles | length > 1 %}
                            <a href="{{ url_for('delete_vehicle', vid=vehicle.id) }}" id="delete_vehicle_{{loop.index}}" class="btn btn-primary btn-warning " role="button">
                                <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> delete
                            </a>
                            {% else %}
                                &nbsp;
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">Filling Stations</div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-6 olMap" style="height: 400px" id="mapdiv"></div>
                <div class="col-md-6">
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-default glyphicon glyphicon-home" id="go_home_button" />
                        <button type="button" class="btn btn-default glyphicon glyphicon-screenshot " id="set_home_button" />
                        <button type="button" class="btn btn-default glyphicon glyphicon-download" id="get_button" />
                    </div>
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Station</th><th></th>
                            </tr>
                        </thead>
                    </table>
                    <div id="station_info">

                    </div>
                </div>
            </div>
        </div>
    <script>
        var lat = {{map_pos[0]}};
        var long = {{map_pos[1]}};
        var zoom = {{map_pos[2]}};
        activate_map('mapdiv', ['get_button', 'set_home_button', 'go_home_button'], lat, long, zoom);
    </script>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">Account</div>
        <div class="panel-body">
        	<a href="{{ url_for('delete_account') }}" id="delete_account" class="btn btn-primary " role="button">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Delete
            </a>
        </div>
    </div>
{% endblock %}