<template>
    <BaseLayout>
        <main class="content">
            <div class="container-fluid p-0">
                <h1 class="h3 mb-3">Files</h1>
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Images</h5>
                    </div>
                    <div class="card-body">
                        <span v-for="files in only_images(files)" :key="files.id">
                            <deletable-wrapper @delete="deleteFile(files)">
                                <authenticated-image :src="files.name" :owner="files.owner"
                                                     class="img-thumbnail"/>
                            </deletable-wrapper>
                        </span>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Other files</h5>
                    </div>
                    <div class="card-body">
                        <ul>
                            <li v-for="file in whithout_images(files)" :key="file.id">
                                {{ file.name }}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </main>
    </BaseLayout>
</template>

<script>
import {mapActions, mapState} from "vuex";
import * as BIcons from "bootstrap-icons-vue";
import BaseLayout from "@/components/BaseLayout.vue";
import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
import DeletableWrapper from "@/components/DeletableWrapper.vue";

export default {
    name: "Files",
    components: {
        AuthenticatedImage,
        BaseLayout,
        DeletableWrapper,
        ...BIcons
    },
    computed: {
        ...mapState(["files"])
    },
    methods: {
        ...mapActions(["fetchFiles", "deleteFile"]),
        only_images(files) {
            return files.filter(file => file.mime_type.startsWith("image/"));
        },
        whithout_images(files) {
            return files.filter(file => !file.mime_type.startsWith("image/"));
        }
    },
    mounted() {
        this.fetchFiles();
    }
}
</script>

<style scoped>

</style>