<template>
    <div class="content-l">
        <h2>Dependency</h2>
        <div class="tile-m" v-for="dependency in [formatDependency(version)]">
            <Codebox :content="dependency"></Codebox>
        </div>
        <div class="col-2">
            <div class="content-m">
                <h2>Files</h2>
                <p class="tile-m pointer" v-if="version.jars" v-for="jar in version.jars" @click="Download.download(jar.url)">{{ jar.filename }}</p>
                <a class="tile-m" v-if="version.pom" :href="'/api/maven2/' + version.pom.url" target="_blank">{{ version.pom.filename }}</a>
            </div>
            <div class="content-m danger-zone" style="align-self: start">
                <h2>Danger Zone</h2>
                <div>
                    <UiButton class="delete">Delete Version</UiButton>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {Download} from "~/utils/Download";
import Codebox from "~/components/artifact/Codebox.vue";
import type {Version} from "~/components/artifact/Artifact";

defineProps<{
    version: Version
}>();

const formatDependency = (version: Version) => {
    const template = [
        "<dependency>",
        "\t<groupId>" + version.groupId + "</groupId>",
        "\t<artifactId>" + version.artifactId + "</artifactId>",
        "\t<version>" + version.version + "</version>",
        "</dependency>"
    ]
    return template.join("\n");
};
</script>

<style scoped>
.delete {
    background-color: var(--danger-color);
}
.danger-zone {
    background-color: #ffeae7;
    padding: 1rem;
    border-radius: 0.25rem;
    border: 1px solid #ffb5b5;
}
</style>