<template>
    <div id="descriptor-skeleton">
        <div class="row justify-between q-pa-sm">
            <QSkeleton square size="40px" />
            <QSkeleton square size="40px" />
            <QSkeleton square height="40px" width="20px" />
        </div>
        <div class="col justify-between q-pa-sm q-gutter-y-xs">
            <QSkeleton square height="40px" width="150px" />
            <QSkeleton square height="30px" width="70px" />
        </div>
        <div class="col q-pl-sm q-pa-sm q-mb-md">
            <div class="row justify-between">
                <QSkeleton type="text" square height="30px" width="20%" />
                <QSkeleton type="text" square height="30px" width="60%" />
            </div>
            <div class="row justify-between">
                <QSkeleton type="text" square height="30px" width="20%" />
                <QSkeleton type="text" square height="30px" width="60%" />
            </div>
            <div class="row justify-between">
                <QSkeleton type="text" square height="30px" width="20%" />
                <QSkeleton type="text" square height="30px" width="60%" />
            </div>
            <div class="row justify-between">
                <QSkeleton type="text" square height="30px" width="20%" />
                <QSkeleton type="text" square height="30px" width="60%" />
            </div>
            <div class="row justify-between">
                <QSkeleton type="text" square height="30px" width="20%" />
                <QSkeleton type="text" square height="30px" width="60%" />
            </div>
            <div class="row justify-between">
                <QSkeleton type="text" square height="30px" width="20%" />
                <QSkeleton type="text" square height="30px" width="60%" />
            </div>
        </div>

        <QCardActions>
            <QSkeleton size="40px" />
            <QSkeleton size="40px" />
            <QSkeleton size="40px" />
            <QSkeleton size="40px" />
            <QSkeleton size="40px" />
        </QCardActions>
    </div>
</template>

<style lang="scss" scoped>
#descriptor-skeleton .q-card__actions {
    justify-content: space-between;
}
</style>
