<template>
    <v-card
        tile
        flat
        :outlined="Notainformarepage.outlined"
        :height="Notainformarepage.height"
        :width="Notainformarepage.width"
        :color="Notainformarepage.color"
        class="mx-auto"
    >
        <v-sheet
            class="text-center full-width text-h6 text-truncate"
            height="70"
            v-html="__(Notainformarepage.title)"
        >
        </v-sheet>

        <v-sheet
            :height="Notainformarepage.height - 70"
            class="overflow-x-hidden overflow-y-auto"
        >
            <!-- Capitolul 1 -->
            <utilizare 
                class="mb-2"
            />

            <!-- Capitolul 2 -->
            <cum 
                class="mb-2"
            />

            <!-- Capitolul 3 -->
            <date 
                :app="app"
                class="mb-2"
            />

            <!-- Capitolul 4 -->
            <transferuri
                class="mb-2"
            />

            <!-- Capitolul  -->
            <drepturi
                :app="app"
                class="mb-2"
            />
            
            <div class="mt-4 text-body-2">
                {{ __('Aceasta versiune a fost actualizata la data de ') }} 
                <strong>{{ app.config.sysconfig['last-update-note'] }}</strong>
            </div>

        </v-sheet>
    </v-card>
</template>

<script>
    export default {

        props: {
            app: {required: true},
        },

        computed: {
            Notainformarepage() {
                return this.app.classes.Notainformarepage;
            }
        },

        components: {
            Utilizare: require('./chapters/Utilizare').default,
            Cum: require('./chapters/Cum').default,
            Date: require('./chapters/Date').default,
            Transferuri: require('./chapters/Transferuri').default,
            Drepturi: require('./chapters/Drepturi').default,
        },

        name: 'NotaInformarePage',
    }
</script>