import axios from 'axios'

<template>
    <center>
        <br><br><br><br>
        <div class="items-center gap-2">
            <form action="https://google.de/search" method="get">
                <input type="text" class="w-1/2 grow input input-bordered w-half half-w-ws" name="q" id="q"
                    placeholder="Search google">
                <input class="btn ml-6" type="submit" name="Submit">
            </form>
            <br><br>
            <hr>
            <br><br>
            <div class="grid grid-flow-row-dense md:grid-flow-row grid-cols-3 gap-4">
                <div>
                    Online on teamspeak: <br>
                    <pre>{{info}}</pre>
                </div>
                <div>
                    Visit <a href="https://services.hackmi.ch">hackmi.ch Services</a>
                </div>
                <div>
                    <h4><a href="https://status.hackmi.ch">Status overview</a></h4>
                    Infra: <img style="display: initial;" src="https://status.hackmi.ch/api/badge/1/status?style=flat-square"><br>
                    Web: <img style="display: initial;" src="https://status.hackmi.ch/api/badge/4/status?style=flat-square"><br>
                    Gaming: <img style="display: initial;" src="https://status.hackmi.ch/api/badge/17/status?style=flat-square">
                </div>
            </div>
        </div>
    </center>
</template>

<script>
    import axios from 'axios'

    export default {
        data() {
            return {
                info: null
            }
        },
        mounted() {
            this.fetchUsers()
            this.intervalfetchUsers()
        },
        methods: {
            fetchUsers() {
                axios
                    .get('https://fastdl.hackmi.ch/ts3users/users.info')
                    .then(response => {
                        this.info = response.data;
                    })
                    .catch(error => {
                        console.log(error);
                        this.errored = true
                    })
                    .finally(() => this.loading = false)
            },
            intervalfetchUsers() {
                setInterval(() => {
                    this.fetchUsers();
                }, 60000);
            }
        }
    }
</script>