<template>
    <div>
        <header-mini />
        <login-bar v-if="usuarioNoLogeado" />
        <nav-bar />

        <div class="container fondoBlanco pedidos">
            <h2 class="pedidos__titulo">Mis pedidos</h2>
            <br>
            <br>
            <div v-if="usuarioNoLogeado" class="pedidos__usuario-no-logeado">
                ¡Ups! Parece que no iniciaste sesión.<br>
                Inicia sesión y controla fácilmente tus pedidos y entregas a domicilio. <br>
                <br>
                <div id="contenedorInicio-Registro" class="center mySeccion" data-collapsed="false">
                    <router-link to="/iniciar-sesion/" id="botonRegistro" class="boton">
                        Registrarse
                    </router-link>
                    <router-link to="/iniciar-sesion/" id="botonInicioSesion" class="boton">
                        Iniciar Sesion
                    </router-link>
                    <br/>
                    <br/>
                    <br/>
                </div>
            </div>
            <div v-else>
                We v:
            </div>
        </div>

        <mi-footer />
    </div>
</template>

<script>
    import HeaderMini from '../components/headerMini'
    import NavBar from '../components/navBar'
    import LoginBar from '../components/navBarInicioSesion'
    import MiFooter from '../components/mi-footer'

    export default {
        name: "MiPedido",
        data: function () {
            return {
                usuario: window.usuarioActual[0]
            }
        },
        components: {
            'header-mini': HeaderMini,
            'nav-bar': NavBar,
            'login-bar': LoginBar,
            'mi-footer': MiFooter
        },
        computed: {
            usuarioNoLogeado: function () {
                return !this.usuario.logged;
            }
        }
    }
</script>

<style scoped lang="sass">
.pedidos__titulo
    text-align: center
    font:
        size: xx-large
        weight: bold
        family: Muli, "Open Sans", sans-serif
    margin: 10px 0

.pedidos__usuario-no-logeado
    font-size: x-large
    text-align: center

.pedidos
</style>