<template>
    <div >
        <div class="page-banner">
            <div class="page-banner-inner">

            </div>
        </div>
        <div class="container">
            <div class="position-container">
                <div class="position">
                    <div class="position-overview">
                        <div class="position-title">
                            <div class="title-bar"></div>
                            <h1>{{ job.JobName}}</h1>
                        </div>
                        <div class="position-location">
                            <div class="region">
                                {{ job.CityName }}, {{ job.CountryName }}
                            </div>
                            <div class="address">
                                {{ job.AddressDetail }}
                            </div>
                        </div>
                        <div class="position-detail">
                            <div class="detail-item">
                                <h2>Job Level</h2>
                                <p>{{ job.JobLevel }}</p>
                            </div>
                            <!-- <div class="detail-item">
                                <h2>Application Posted</h2>
                                <p>9 February 2020</p>
                            </div> -->
                            <div class="detail-item">
                                <h2>Application Deadline</h2>
                                <p>{{ deadlineFormat }}</p>
                            </div>
                            <div class="detail-item">
                                <h2>Status</h2>
                                <p>{{ openStatus }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="position-description">
                        <div class="description">
                            {{ job.JobDescription }}
                        </div>
                        <div class="flex-center">
                            <button class="button medium w-50" @click="applyJob">Apply</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import API from '../lib/API';

export default {
    data() {
        return {
            job: {},
        }
    },
    computed: {
        openStatus() {
            if(this.job.Deadline) {
                var deadline = new Date(this.job.Deadline);
                var now = new Date();
                if(deadline < now) {
                    return "Closed";
                } else {
                    return "Open";
                }
            }
            return "Unknown";
        },
        deadlineFormat() {
            var deadline = new Date(this.job.Deadline);
            return deadline.toLocaleDateString('en-GB', {
                day: 'numeric',
                month: 'long',
                year: 'numeric'
            });
        }
    },
    methods: {
        applyJob(e) {
            e.preventDefault();
            this.$router.push({
                name: 'job-apply',
                params: { id: this.$route.params.id }
            })
        }
    },
    mounted() {
        var id = this.$route.params.id;
        API.get('/getJob?jobId='+id).then(({ data }) => {
            this.job = data[0];
        });
    }
}
</script>
<style>

</style>