<template>
    <Box no-shadow level="second" padding="closed">
        <div class="container-list">
            <Server :server="server"/>
            <ServerOnlinePicture class="sop" :key="server.id" v-if="server.members.length > 0" :members="server.members"/>
            <section>
            <Error v-if="userStore.userInfo.labels.includes('BAN_' + server.id)">Banni</Error>
            <Button color-lower :disabled="userStore.userInfo.labels.includes('BAN_' + server.id)" class="btn" @click="access()"><Icon icon="fa-solid fa-right-to-bracket"/>Accéder</Button>
            </section>
        </div>
    </Box>
</template>
<script setup>
import Box from '@/components/UI/Box.vue';
import Button from '@/components/UI/Button.vue';
import { useGlobalStore } from '@/stores/globalStore';
import { useRouter } from 'vue-router';
import ServerOnlinePicture from '@/components/Widget/Server/ServerOnlinePicture.vue';
import Server from '@/components/UI/Server.vue';
import { useUserStore } from '@/stores/userStore';
import Error from '@/components/UI/Error.vue';
const router = useRouter();

const userStore = useUserStore();

const globalStore = useGlobalStore();

const props = defineProps({
    server: {
        type: Object,
        required: true,
        default: () => ({
            id: '',
            name: '',
            owner: false,
            icon: '',
            members: [],
            serverMember: 0,
            connected: false
        })
    }
});

function access() {
    router.push(`/servers/${props.server.id}`);
}
</script>
<style scoped>

.actions {
    display: flex;
    align-items: center;
    gap: 10px;
}   

@media screen and (max-width: 768px) {
    .container-list {
        flex-direction: column;
        gap: 20px;;

    }

    .btn {
        width: 100%;
    }

    .sop {
        display: none;
    }
    
    section {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }
}

.container-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;    
}

.btn svg {
    font-size: 1.1em;
}

.sop {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

section {
    display: flex;
    align-items: center;
    gap: 10px;  
}


</style>