{% extends "app" %}
{% block title %}Sites{% endblock %}
{% block content %}
    <div class="flex flex-col py-8">
        <div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
            <div
                class="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200">
                <table class="min-w-full">
                    <thead>
                    <tr>
                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
                            Host
                        </th>
                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
                            Subdomain
                        </th>
                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
                            Shared At
                        </th>
                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-50"></th>
                    </tr>
                    </thead>
                    <tbody class="bg-white">
                    {% for site in sites %}
                        <tr>
                            <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 font-medium text-gray-900">
                                {{ site.host }}
                            </td>
                            <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
                                {{ site.subdomain }}.localhost:8080
                            </td>
                            <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
                                {{ site.shared_at }}
                            </td>
                            <td class="px-6 py-4 whitespace-no-wrap text-right border-b border-gray-200 text-sm leading-5 font-medium">
                                <a href="http://{{ site.subdomain }}.localhost:8080" target="_blank"
                                   class="text-indigo-600 hover:text-indigo-900">Visit</a>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
{% endblock %}
{% block scripts %}
    <script>
        new Vue({
            el: '#app',

            delimiters: ['@{', '}'],

            data: {
                userForm: {
                    name: '',
                    errors: {},
                },
                users: {{ users|json_encode|raw }}
            },

            methods: {
                deleteUser(user) {
                    fetch('/expose/users/delete/' + user.id, {
                        method: 'DELETE',
                    }).then((response) => {
                        return response.json();
                    }).then((data) => {
                        this.users = this.users.filter(u => u.id !== user.id);
                    });
                },
                saveUser() {
                    fetch('/expose/users', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(this.userForm)
                    }).then((response) => {
                        return response.json();
                    }).then((data) => {
                        if (data.user) {
                            this.userForm.errors = {};
                            this.users.unshift(data.user);
                        }
                        if (data.errors) {
                            this.userForm.errors = data.errors;
                        }
                    });
                }
            }
        })
    </script>
{% endblock %}