{% extends 'layouts/layout_user.html' %}
{% from 'bootstrap/wtf.html' import form_field %}

{% block title %}
Settings | {{ config['PUBLIC_CONFIG'].site.title }}
{% endblock %}
{% block styles %}
{{super()}}
{% endblock %}
{% block content %}
<div class="panel panel-default">
    <div class="panel-heading">
        <h1 class="panel-title">
            <div class="col-md-11">
                <a href="{{ url_for('HomeView:index') }}">{{ config['PUBLIC_CONFIG'].site.title }}</a>
            </div>
            <div>Version: {{ config['PUBLIC_CONFIG'].project.version }}</div>
        </h1>
    </div>
    <div class="panel-body">
        <div class="container-fluid">
            <div class="row well">
                <div class="col-md-8">
                    <p>{% trans %}Settings{% endtrans %}</p>
                </div>
                <div class="col-md-2">
                    <a href="{{ url_for('ProviderView:dashboard') }}" role="button" class="btn btn-info">
                        {% trans %}Dashboard{% endtrans %}
                    </a>
                </div>
                <div class="col-md-2">
                    <a href="{{ url_for('ProviderView:logout') }}" class="btn btn-warning" role="button">
                        {% trans %}Logout{% endtrans %}
                    </a>
                </div>
            </div>
            <div class="row well">
                <form action="" method="post" class="form" role="form">
                    {{ form.hidden_tag() }}
                    {{ render_bootstrap_field(form.locale) }}
                    {{ form_field(form.submit, class="btn btn-success") }}
                </form>
            </div>
            <div class="row">
                {% if servers|length == 0 %}
                <div class="alert alert-info">To open dashboard you should have at least 1 server, please add it.</div>
                {% endif %}
            </div>
            <div class="row well">
                <div class="row">
                    <table id='servers_table' class="table">
                        <thead>
                        <tr>
                            <th class="number">#</th>
                            <th class="value">{% trans %}Name{% endtrans %}</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for server in servers %}
                        <tr id='{{ server.id }}'>
                            <td>{{ loop.index }}</td>
                            <td>{{ server.name }}</td>
                            <td>
                                <button type="submit" class="btn btn-success btn-xs"
                                        onclick="edit_server('{{ server.id }}')">
                                    {% trans %}Edit{% endtrans %}
                                </button>
                                <button type="submit" class="btn btn-success btn-xs"
                                        onclick="add_provider_to_server('{{ server.id }}')">
                                    {% trans %}Add provider{% endtrans %}
                                </button>
                                <button type="submit" class="btn btn-danger btn-xs"
                                        onclick="remove_server('{{ server.id }}')">
                                    {% trans %}Remove{% endtrans %}
                                </button>
                            </td>
                        </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="row">
                <button type="submit" class="btn btn-success" onclick="add_server()">
                    {% trans %}Add server{% endtrans %}
                </button>
            </div>
        </div>
    </div>
</div>
<div id="service_dialog" class="modal fade" tabindex=-1 role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script type="text/javascript" charset="utf-8">
    // service
    function add_server_entry(url) {
        $.ajax({
            url: url,
            type: "POST",
            dataType: 'json',
            data: $('#service_entry_form').serialize(),
            success: function (response) {
                console.log(response);
                $('#service_dialog').modal('hide');
                window.location.reload();
            },
            error: function (error) {
                console.error(error);
                $('#service_dialog .modal-content').html(data);
            }
        });
    }

    function add_provider_to_server_entry(url) {
        $.ajax({
            url: url,
            type: "POST",
            dataType: 'json',
            data: $('#user_entry_form').serialize(),
            success: function (response) {
                console.log(response);
                $('#service_dialog').modal('hide');
                window.location.reload();
            },
            error: function (error) {
                console.error(error);
                $('#service_dialog .modal-content').html(data);
            }
        });
    }

    function add_provider_to_server(sid) {
        var url = "/service/provider/add/" + sid;
        $.get(url, function(data) {
            $('#service_dialog .modal-content').html(data);
            $('#service_dialog').modal();

            $('#apply').click(function(event) {
                event.preventDefault();
                add_provider_to_server_entry(url);
            })
        });
    }

    function add_server() {
        var url = "{{ url_for('ServiceView:add') }}";
        $.get(url, function(data) {
            $('#service_dialog .modal-content').html(data);
            $('#service_dialog').modal();

            $('#apply').click(function(event) {
                event.preventDefault();
                add_server_entry(url);
            })
        });
    }

    function edit_server_entry(url) {
        $.ajax({
            url: url,
            type: "POST",
            dataType: 'json',
            data: $('#service_entry_form').serialize(),
            success: function (response) {
                console.log(response);
                $('#service_dialog').modal('hide');
                window.location.reload();
            },
            error: function (error) {
                console.error(error);
                $('#service_dialog .modal-content').html(data);
            }
        });
    }

    function edit_server(sid) {
        var url = "/service/edit/" + sid;
        $.get(url, function(data) {
            $('#service_dialog .modal-content').html(data);
            $('#service_dialog').modal();

            $('#apply').click(function(event) {
                event.preventDefault();
                edit_server_entry(url);
            })
        });
    }

    function remove_server(sid) {
        $.ajax({
            url: "{{ url_for('ServiceView:remove') }}",
            type: "POST",
            dataType: 'json',
            data: {"sid":sid},
            success: function (response) {
                console.log(response);
                window.location.reload();
            },
            error: function (error) {
                console.error(error);
            }
        });
    }



</script>
{% endblock %}