<template>
    <ion-content class="loc-content">
        <div class="loc-title">{{AnnouncementTitle}}</div>
        <div class="loc-body" v-html="AnnouncementBody"></div>
        <ion-button @click="closeAnnouncement()" class="exitButton">Ok, thanks!</ion-button>
    </ion-content>
</template>
<script>
export default {
    props:{
        AnnouncementTitle:{
            type: String,
            default: "Announcement Title"
        },
        AnnouncementBody:{
            type: String,
            default: "This is the body of the announcement."
        },
        closeAnnouncement:{
            type: Function,
            default: () => { return }
        },
    }
}
</script>
<style scoped lang="css">
.loc-content{
    background-color: #fff;
}
.loc-title{
    color: var(--actiways-primary-color);
    text-align: center;
    margin-top: 30px;
    font-weight: 600;
    font-size: 25px;
}
.loc-body{
    color: black;
    margin-top: 10px;
    margin-left: 15px;
    margin-right: 15px;
}
.exitButton{
    position: relative;
    display: block;
    bottom: 5vh;
    width: 120px;
    left: 50%;
    margin-left: -60px;
    margin-top: 50px;
    --background: var(--actiways-primary-color);
    --background-activated: var(--actiways-primary-color);
}
</style>