<template>
    <div class="row col-md-10 col-md-offset-1">
        <div class="col-md-12">

            <!-- <h6 class="text-center">Pautan Zoom</h6> -->
            <div>
                <img :src="imageUrl" alt="background-img" class="background-img" @click="navigateToURL" />

            </div>
            <hr>
            <div class="mt-2 text-muted text-center" style="font-weight: bold;">
                Tekan pada gambar untuk ke <span style="color: #007bff;">Linktree</span>
            </div>

            <!-- <div class="right-button">
                <button class="btn btn-info right-button">Lampiran Dokumen MAT ke-27/2023 >></button>
            </div> -->
        </div>


    </div>
</template>

<script>


export default {

    methods: {
        navigateToURL() {
            // Navigate to the desired URL
            window.open('https://linktr.ee/kopkb', '_blank');
        }
    },

    created: function () {
        //console.log(this)
    },

    data: function () {
        return {
            x: {}
        }
    },

    computed: {
        header: function () {
            return this.x.name + ' for ' + this.getPosition(this.x.position_id);
        }
    },

    data() {
        return {
            imageUrl: '/images/linktree-kopkb.jpg'
        }

    }



};
</script>
<style>
.background-img {
    /* Styles for the image */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    /* Ensure the image does not exceed container dimensions */
    max-width: 100%;
    max-height: 80vh;
    border-radius: 20px;
}

/* transform: translate(-50%, -50%); */



.right-button {

    border-color: rgb(14, 14, 15);
    text-align: left;
    /* Align button content to the left */
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    /* padding: 15px ;  */
}



.right-button :hover {
    /* Button styles on hover */
    outline-color: #045415;

}
</style>