<template>
    <div class="time-slots-question">
        <buttonQuestion
            v-if="isDropOffAppointmentAvailable"
            v-model="selectedAnswerForDropOffOrInshop"
            @update:modelValue="dropOffSelectionChanged"
            :questionText="dropOffOrPickATimeQuestionLabelText"
            :questionTextDescription="dropOffOrPickATimeQuestionDescription"
            :answers="answersForDropOffQuestion"
            isRequired
            insertOrLabelBeforeFinalOption
            groupName="chooseDropOffOrInshop"
            class="choose-dropoff-or-inshop"
            validationRules="time-slot-required">
            <div>
                <alert
                    v-if="shouldDisplayDropOffAlert"
                    ref="alertDropoffInformation"
                    class="mt-4 mb-4 drop-off-alert"
                    :cmsWidgetName="dropOffTimeSlotAlertCMSWidgetName"
                    alertClass="alert-info"
                    v-bind:isDismissible="false" />
            </div>
        </buttonQuestion>
        <buttonQuestion
            ref="buttonQuestion"
            v-if="shouldDisplayTimeSlotQuestion"
            @update:modelValue="timeSlotSelectionChanged"
            buttonTypeString="timeSlotModalListButton"
            :buttonTypeObject="timeSlotModalListButton"
            class="mt-4 timeslots"
            :class="[
                isMobileAppointment ? 'is-mobile-appointment' : '',
                isInshopOrDropOffAppointment ? 'is-inshop-or-drop-off-appointment' : '',
            ]"
            :answers="availableTimeSlots"
            :lazyLoad="{ isLazyLoad: !isMobileAppointment, amountToLoad: 10 }"
            groupName="chooseTimeSlot"
            textPosition="text-center"
            v-model="selectedAnswerForTimeSlots"
            questionText="Available times:"
            isRequired
            validationRules="time-slot-required" />
        <div
            class="supplemental-information"
            v-if="supplementalInformationBlock"
            v-html="supplementalInformationBlock" />
        <div
            v-if="hasWaitListExperiment && displayWaitListFeature"
            class="mt-5 bg-light rounded waitlist">
            <textBlock
                cmsWidgetName="WaitListLabelWidget"
                typeStyle="medium"
                fontWeight="600"
                class="waitlist-label"
                marginTopSizeOverride="0" />
            <checkboxQuestion
                class="mt-3"
                cmsWidgetName="WaitListQuestionWidget"
                v-model="waitListRequested"
                @click="waitListChecked" />
        </div>
        <div
            v-if="waitListRequested && displayWaitList"
            class="rounded waitlist-success"
            ref="waitlistSuccessMessage">
            <img :src="waitListSuccessImage" class="success-image" />
            <span v-html="waitListSuccessText" class="success-text"></span>
        </div>
        <textBlock
            v-show="disclaimerTextBlockCopy"
            :customText="disclaimerTextBlockCopy"
            justifyText="left"
            typeStyle="caption"
            class="disclaimer" />
    </div>
</template>

<script>
// Removed modal import
import textBlock from "@/digital-components/text-block/text-block";
import buttonQuestion from "@/digital-components/button-question/button-question";
import checkboxQuestion from "@/digital-components/checkbox-question/checkbox-question";
import timeSlotModalListButton from "@/layouts/schedule/time-slot-modal-question/time-slot-modal-list-button/time-slot-modal-list-button.vue";
import alert from "@/ux-components/alert/alert.vue";
import experimentMixin from "@/mixins/experiment-mixin";
import { experimentSettings } from "@/constants/experiments";
import store from "@/store";
import { storeActions } from "@/constants/store-actions";

// Helpers
import { deepClone } from "@/helpers/object-helper";
import {
    isDropOffRouteCode,
    militaryToTwelveHourTime,
} from "@/layouts/schedule/helpers/schedule-helper";

// Validation
import { defineRule, useField } from "vee-validate";
import { errorMessages } from "@/constants/error-messages";
import { required } from "@/helpers/validation-rules";

import { v4 as uuidv4 } from "uuid";

// Constants
import {
    AppointmentTypeStrings,
    RouteCodeFlags,
    PREMIUM_TIME_SLOT_ID_FLAG,
    PREMIUM_FEE_PART_TYPE,
    cmsWidgetFieldMappings,
} from "@/constants/schedule-constants";

const PICK_A_TIME_BUTTON_VALUE = "pick-a-time-selected";

defineRule("time-slot-required", required(errorMessages.OPTION_REQUIRED));

export default {
    name: "time-slot-question",
    emits: ["update:modelValue", "time-slot-selection-changed"],
    props: {
        mobileCmsWidgetName: String,
        mobilePremiumCmsWidgetName: String,
        dropoffCmsWidgetName: String,
        sameDayDropOffCmsWidgetName: String,
        overnightDropOffCmsWidgetName: String,
        dropOffOrPickATimeQuestionCmsWidgetName: String,
        appointmentType: String,
        timeSlotsForSelectedDate: Object,
        premiumAppointmentFee: Object,
        validationRules: String,
        customComponentId: String,
        isSameDay: Boolean,
        displayWaitList: Boolean,
        selectedRouteCodeData: Object,
    },
    data() {
        return {
            timeSlotModalListButton: timeSlotModalListButton,
            selectedAnswerForTimeSlots: null,
            selectedAnswerForDropOffOrInshop: null,
        };
    },
    mounted() {
        this.updateDropoffAndTimeSlotAnswersFromSelectedRouteCodeData(this.selectedRouteCodeData);
        this.autoSelectTimeSlotIfOnlyOneIsAvailable();
    },
    setup(props) {
        const uuid = uuidv4();
        const componentId = !props.customComponentId
            ? `component-${uuid}`
            : props.customComponentId;

        const modelValue = deepClone(props).modelValue;
        const initialValue = modelValue;

        const fieldOptions = {
            value: modelValue,
            initialValue: initialValue,
        };

        const { errorMessage, handleChange, meta, validate, errors } = useField(
            componentId,
            props.validationRules,
            fieldOptions
        );

        return {
            componentId,
            errorMessage,
            handleChange,
            validate,
            meta,
            errors,
        };
    },
    watch: {
        waitListRequested(newVal) {
            if (newVal) {
                this.$nextTick(() => {
                    this.scrollToSuccessMessage();
                });
            }
        },
        selectedRouteCodeData(newValue) {
            this.updateDropoffAndTimeSlotAnswersFromSelectedRouteCodeData(newValue);
        },
        timeSlotsForSelectedDate() {
            this.selectedAnswerForDropOffOrInshop = null;
            this.selectedAnswerForTimeSlots = null;
            this.autoSelectTimeSlotIfOnlyOneIsAvailable();
        },
    },
    computed: {
        supplementalInformationBlock() {
            let appointmentTypeCmsWidgetName;

            if (
                this.appointmentType === AppointmentTypeStrings.IN_SHOP_OR_DROP_OFF ||
                this.appointmentType === AppointmentTypeStrings.IN_SHOP ||
                this.appointmentType === AppointmentTypeStrings.DROP_OFF ||
                !this.availableTimeSlots
            ) {
                return null;
                // This is planned to be used again for drop-off
                // Wrote this to be ready for that eventuality, is untested and no HTML work done yet

                // if (this.selectedRouteCode == null || !isDropOffRouteCode(this.selectedRouteCode)) {
                //     return null;
                // } else {
                //     appointmentTypeCmsWidgetName =
                //         this.getRelevantDropOffCmsWidgetNameForSelectedTimeSlot(
                //             this.selectedRouteCode,
                //             true
                //         );
                // }
            } else {
                appointmentTypeCmsWidgetName = this.selectedRouteCodeData?.routeCode?.includes(
                    PREMIUM_TIME_SLOT_ID_FLAG
                )
                    ? this.mobilePremiumCmsWidgetName
                    : this.mobileCmsWidgetName;
            }

            return this.getCmsContent(
                appointmentTypeCmsWidgetName,
                cmsWidgetFieldMappings.SUPPLEMENTAL_INFORMATION
            );
        },
        dropOffOrPickATimeQuestionLabelText() {
            return this.getCmsContent(this.dropOffOrPickATimeQuestionCmsWidgetName, "QuestionText");
        },
        dropOffOrPickATimeQuestionDescription() {
            // This is hardcoded because Input Question Widget doesn't currently have a place to add additional text
            return "You can drop off your vehicle in the morning and pick it up later in the day with Drop & Go<sup>&#8482</sup> or pick an appointment time.";
        },
        pickATimeButtonLabelText() {
            return this.getCmsContent(this.dropOffOrPickATimeQuestionCmsWidgetName, "Answers")[0]
                .Text;
        },
        premiumAppointmentButtonText() {
            return this.getCmsContent(
                this.mobilePremiumCmsWidgetName,
                cmsWidgetFieldMappings.TIME_SLOT_BUTTON
            );
        },
        dropoffButtonText() {
            return this.getCmsContent(
                this.dropoffCmsWidgetName,
                cmsWidgetFieldMappings.TIME_SLOT_BUTTON
            );
        },
        sameDayDropoffButtonText() {
            return this.getCmsContent(
                this.sameDayDropOffCmsWidgetName,
                cmsWidgetFieldMappings.TIME_SLOT_BUTTON
            );
        },
        overnightDropoffButtonText() {
            return this.getCmsContent(
                this.overnightDropOffCmsWidgetName,
                cmsWidgetFieldMappings.TIME_SLOT_BUTTON
            );
        },
        // None of this is used, but apparently could be re-activated if we go back to
        //   complete parity with Heritage. If that plan is dropped, delete this
        // dropoffDisclaimerText() {
        //     return this.getCmsContent(this.dropoffCmsWidgetName, cmsWidgetFieldMappings.DISCLAIMER);
        // },
        // sameDayDropOffDisclaimerText() {
        //     return this.getCmsContent(
        //         this.sameDayDropOffCmsWidgetName,
        //         cmsWidgetFieldMappings.DISCLAIMER
        //     );
        // },
        // overnightDropOffDisclaimerText() {
        //     return this.getCmsContent(
        //         this.overnightDropOffCmsWidgetName,
        //         cmsWidgetFieldMappings.DISCLAIMER
        //     );
        // },
        // disclaimerTextBlockCopy() {
        //     if (this.appointmentType === AppointmentTypeStrings.DROP_OFF) {
        //         if (this.selectedRouteCode?.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) {
        //             if (this.isSameDay) {
        //                 return this.sameDayDropOffDisclaimerText;
        //             } else {
        //                 return this.dropoffDisclaimerText;
        //             }
        //         } else if (this.selectedRouteCode?.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
        //             return this.overnightDropOffDisclaimerText;
        //         } else {
        //             return null;
        //         }
        //     } else {
        //         return null;
        //     }
        // },
        availableTimeSlots() {
            if (!this.timeSlotsForSelectedDate) {
                return null;
            }

            if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
                return this.getAvailableTimeSlotsForMobile(this.timeSlotsForSelectedDate.timeSlots);
            } else {
                return this.getAvailableTimeSlotsForInshop(this.timeSlotsForSelectedDate.timeSlots);
            }
        },
        answersForDropOffQuestion() {
            if (!this.timeSlotsForSelectedDate) {
                return null;
            }
            const dropOffQuestionAnswers = this.timeSlotsForSelectedDate.timeSlots
                .filter((timeSlot) => {
                    return isDropOffRouteCode(timeSlot.id);
                })
                .map((timeSlot) => {
                    let buttonLabelValue;
                    if (timeSlot.id.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
                        buttonLabelValue = this.overnightDropoffButtonText;
                    } else if (this.isSameDay) {
                        buttonLabelValue = this.sameDayDropoffButtonText;
                    } else {
                        buttonLabelValue = this.dropoffButtonText;
                    }
                    return {
                        value: timeSlot.id,
                        buttonLabel: buttonLabelValue,
                    };
                });
            // Only add the pick a time button if inShop timeslots are available
            if (
                this.getAvailableTimeSlotsForInshop(this.timeSlotsForSelectedDate.timeSlots)
                    .length !== 0
            ) {
                dropOffQuestionAnswers.push({
                    value: PICK_A_TIME_BUTTON_VALUE,
                    buttonLabel: this.pickATimeButtonLabelText,
                });
            }
            return dropOffQuestionAnswers;
        },
        hasWaitListExperiment() {
            return experimentMixin.methods.hasSettingEqualTo(
                experimentSettings.DISPLAY_WAITLIST,
                "true"
            );
        },
        displayWaitListFeature() {
            return this.displayWaitList;
        },
        waitListSuccessImage() {
            return this.getCmsContent("WaitListSuccessWidget", "Image");
        },
        waitListSuccessText() {
            return this.getCmsContent("WaitListSuccessWidget", "BodyText");
        },
        waitListRequested: {
            get() {
                return this.$store.getters.order.customer?.waitListRequested;
            },
            set(value) {
                this.dispatchStoreAction(storeActions.SAVE_WAITLIST_REQUESTED, value);
            },
        },
        isMobileAppointment() {
            return this.appointmentType === AppointmentTypeStrings.MOBILE;
        },
        isInshopOrDropOffAppointment() {
            return this.appointmentType === AppointmentTypeStrings.IN_SHOP_OR_DROP_OFF;
        },
        shouldDisplayDropOffAlert() {
            return isDropOffRouteCode(this.selectedAnswerForDropOffOrInshop);
        },
        dropOffTimeSlotAlertCMSWidgetName() {
            if (this.selectedAnswerForDropOffOrInshop.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
                return "OvernightDropOffTimeSlotAlert";
            } else if (this.isSameDay) {
                return "SameDayDropOffTimeSlotAlert";
            } else {
                return "DropOffTimeSlotAlert";
            }
        },
        isDropOffAppointmentAvailable() {
            return (
                this.answersForDropOffQuestion !== null &&
                this.answersForDropOffQuestion.length !== 0 &&
                this.answersForDropOffQuestion[0].value !== PICK_A_TIME_BUTTON_VALUE
            );
        },
        shouldDisplayTimeSlotQuestion() {
            return (
                this.selectedAnswerForDropOffOrInshop == PICK_A_TIME_BUTTON_VALUE ||
                !this.isDropOffAppointmentAvailable
            );
        },
    },
    methods: {
        updateDropoffAndTimeSlotAnswersFromSelectedRouteCodeData(selectedRouteCodeData) {
            if (selectedRouteCodeData?.routeCode) {
                let routeCode = selectedRouteCodeData.routeCode;
                if (isDropOffRouteCode(routeCode)) {
                    this.selectedAnswerForDropOffOrInshop = routeCode;
                } else {
                    this.selectedAnswerForDropOffOrInshop = PICK_A_TIME_BUTTON_VALUE;
                    if (this.selectedRouteCodeData.isPremiumAppointment) {
                        routeCode = this.addPremiumFlagToInput(routeCode);
                    }
                    this.selectedAnswerForTimeSlots = routeCode;
                }
            } else {
                this.selectedAnswerForDropOffOrInshop = null;
                this.selectedAnswerForTimeSlots = null;
            }
        },
        dropOffSelectionChanged(newValue) {
            let newSelectedRouteCodeData = null;
            if (newValue && newValue != PICK_A_TIME_BUTTON_VALUE) {
                newSelectedRouteCodeData = {
                    routeCode: newValue,
                    isPremiumAppointment: false,
                };
            }
            this.selectedAnswerForTimeSlots = null;
            this.$emit("time-slot-selection-changed", newSelectedRouteCodeData);
        },
        timeSlotSelectionChanged(newValue) {
            if (newValue) {
                let routeCode = newValue;
                let isPremiumAppointment = routeCode.includes(PREMIUM_TIME_SLOT_ID_FLAG);
                if (isPremiumAppointment) {
                    routeCode = this.removePremiumFlagFromInput(routeCode);
                }
                this.$emit("time-slot-selection-changed", {
                    routeCode: routeCode,
                    isPremiumAppointment: isPremiumAppointment,
                });
            }
        },
        // This is unused but planned to be used again
        // getRelevantDropOffCmsWidgetNameForSelectedTimeSlot(
        //     selectedRouteCode,
        //     isSameDayRelevant = false
        // ) {
        //     if (selectedRouteCode.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
        //         return this.overnightDropOffCmsWidgetName;
        //     } else if (selectedRouteCode.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) {
        //         return this.isSameDay && isSameDayRelevant
        //             ? this.sameDayDropOffCmsWidgetName
        //             : this.dropoffCmsWidgetName;
        //     }
        // },
        getAvailableTimeSlotsForInshop(timeSlotsForSelectedDate) {
            return timeSlotsForSelectedDate
                .filter((timeSlot) => {
                    return !isDropOffRouteCode(timeSlot.id);
                })
                .map((timeSlot) => {
                    const readableTime = militaryToTwelveHourTime(timeSlot.startTime);
                    return {
                        value: timeSlot.id,
                        buttonLabel: readableTime,
                    };
                });
        },
        getAvailableTimeSlotsForMobile(timeSlotsForSelectedDate) {
            const availableTimeSlots = timeSlotsForSelectedDate.map((timeSlot) => {
                const readableTime = `${militaryToTwelveHourTime(timeSlot.startTime)} - ${militaryToTwelveHourTime(
                    timeSlot.endTime
                )}`;
                return {
                    value: timeSlot.id,
                    buttonLabel: readableTime,
                };
            });

            const isPremiumTimeSlot = timeSlotsForSelectedDate[0].offerPremium;
            const hasPremiumPartAvailable =
                this.premiumAppointmentFee?.partType === PREMIUM_FEE_PART_TYPE;
            if (isPremiumTimeSlot && hasPremiumPartAvailable) {
                availableTimeSlots.unshift(
                    this.getPremiumAppointmentTimeSlot(timeSlotsForSelectedDate[0])
                );
            }

            return availableTimeSlots;
        },
        getPremiumAppointmentTimeSlot(timeSlotData) {
            const formattedPrice =
                "+$" + this.getTotalLineItemPrice(this.premiumAppointmentFee).toFixed(2);
            return {
                // Unique value is required for each <input> and the premium appointment shares an id
                value: this.addPremiumFlagToInput(timeSlotData.id),
                buttonLabel: this.premiumAppointmentButtonText,
                buttonLabelSubCopy: formattedPrice,
                additionalButtonData: {
                    isPremiumAppointment: true,
                },
            };
        },
        getWaitListRequestedFromStore() {
            return store.getters.order.customer?.waitListRequested;
        },
        autoSelectTimeSlotIfOnlyOneIsAvailable() {
            const numberOfOptions = this.timeSlotsForSelectedDate?.timeSlots?.length;
            if (numberOfOptions === 1) {
                if (this.availableTimeSlots.length > 0) {
                    // this.availableTimeSlots only returns mobile/inshop slots so we know
                    //   the only available slot is not dropOFf
                    this.selectedAnswerForTimeSlots = this.availableTimeSlots[0].value;
                    // emit up to parent that the time slot has been selected (when mobile or inshop)
                    this.timeSlotSelectionChanged(this.availableTimeSlots[0].value);
                } else {
                    this.selectedAnswerForDropOffOrInshop = this.answersForDropOffQuestion[0].value;
                    // emit up to parent that the time slot has been selected (when only dropoff)
                    this.dropOffSelectionChanged(this.answersForDropOffQuestion[0].value);
                }
            }
        },
        addPremiumFlagToInput(routeCode) {
            return (routeCode += PREMIUM_TIME_SLOT_ID_FLAG);
        },
        removePremiumFlagFromInput(routeCode) {
            return routeCode.replace(PREMIUM_TIME_SLOT_ID_FLAG, "");
        },
        waitListChecked(event) {
            this.$emit("waitListRequested", event.target.checked);
        },
        scrollToSuccessMessage() {
            const successMessageElement = this.$refs.waitlistSuccessMessage;
            if (successMessageElement) {
                successMessageElement.scrollIntoView({ behavior: "smooth" });
            }
        },
    },
    components: {
        textBlock,
        buttonQuestion,
        checkboxQuestion,
        alert,
    },
};
</script>

<style lang="scss">
.time-slots-question {
    margin-top: 1.5rem;

    .time-slot-header {
        font-family: UrbanistBold;
        margin-top: 1.5rem;
    }
    .text-block.duration-text-block {
        margin-top: 0;
    }
    .supplemental-information {
        line-height: 1.5rem;
        font-size: 0.875rem;
        text-align: left;
        margin: 1rem 0 1.5rem;
        li strong {
            font-weight: bold;
        }
        li:not(:last-child) {
            margin-bottom: 8px;
        }
    }
    .button-question.choose-dropoff-or-inshop
        .button-inner-wrapper
        .col:first-child
        .button-content.list-button-content
        > span::after {
        content: "TM";
        vertical-align: super;
        font-size: 50%;
    }
    .waitlist {
        box-shadow: 0 1px 5px 0 #00000033;
        border-radius: 8px;
        font-size: 1rem;
        padding: 16px;
        text-align: left;

        .waitlist-label {
            font-family: UrbanistSemibold;
        }

        .ui-checkbox {
            padding-left: 0px;
            input {
                border-radius: 4px;
                box-shadow: 0 1px 5px 0 #00000033;
            }
        }
        .form-check-input {
            margin-left: 0px;
        }
    }
    .waitlist-success {
        margin: 1rem 0 0;
        background-color: #ecf5e9;
        display: flex;
        align-items: flex-start;
        border: 1px solid #0c7e47;
        border-radius: 5px;
        font-size: 1.125rem;
        padding: 0.75rem 1rem;
        .success-text {
            margin-left: 0.5rem;
            p {
                margin-bottom: 0;
            }
        }
        .success-image {
            margin-top: 4.5px;
            width: 1rem;
            height: 1rem;
            color: #0c7e47;
        }
    }
    .disclaimer {
        text-align: left;
        margin: 1.5rem 0 0;
    }
    .drop-off-alert {
        background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_13957_112512)'%3E%3Cpath d='M5.99865 0C4.81147 4.82643e-07 3.65095 0.352111 2.66392 1.01179C1.67688 1.67146 0.907678 2.60907 0.45361 3.70599C-0.000459241 4.80291 -0.11899 6.00986 0.113013 7.17415C0.345015 8.33845 0.917126 9.40778 1.75697 10.2469C2.59682 11.086 3.66666 11.6571 4.83117 11.8881C5.99567 12.119 7.20251 11.9994 8.29902 11.5443C9.39553 11.0893 10.3324 10.3192 10.9912 9.33159C11.65 8.34396 12.0011 7.18313 12 5.99594C11.9971 4.40566 11.3638 2.88142 10.2388 1.75742C9.11375 0.633431 7.58894 0.00143011 5.99865 0V0ZM5.99865 11.2478C4.96135 11.2473 3.94748 10.9392 3.08518 10.3627C2.22288 9.7861 1.55085 8.96685 1.15401 8.00846C0.75718 7.05006 0.653353 5.99554 0.855656 4.97815C1.05796 3.96077 1.55731 3.02618 2.29061 2.29251C3.0239 1.55884 3.95823 1.059 4.97551 0.856176C5.99279 0.653349 7.04737 0.756633 8.00597 1.15297C8.96457 1.54931 9.78416 2.22092 10.3612 3.08293C10.9382 3.94493 11.2467 4.95864 11.2478 5.99594C11.2478 7.38835 10.6949 8.72377 9.71053 9.70861C8.7262 10.6934 7.39106 11.2471 5.99865 11.2478V11.2478Z' fill='%2306577C'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.22736 8.84695C6.30613 8.76818 6.35038 8.66135 6.35038 8.54996V5.30996C6.35038 5.19857 6.30613 5.09174 6.22736 5.01298C6.1486 4.93421 6.04177 4.88996 5.93038 4.88996C5.81899 4.88996 5.71216 4.93421 5.63339 5.01298C5.55463 5.09174 5.51038 5.19857 5.51038 5.30996V8.54996C5.51038 8.66135 5.55463 8.76818 5.63339 8.84695C5.71216 8.92571 5.81899 8.96996 5.93038 8.96996C6.04177 8.96996 6.1486 8.92571 6.22736 8.84695ZM5.69704 3.97918C5.76611 4.02533 5.84731 4.04996 5.93038 4.04996C5.98558 4.05012 6.04026 4.03936 6.09129 4.01831C6.14232 3.99726 6.18868 3.96633 6.22771 3.9273C6.26675 3.88827 6.29768 3.8419 6.31873 3.79088C6.33978 3.73985 6.35053 3.68516 6.35038 3.62996C6.35038 3.54689 6.32574 3.46569 6.27959 3.39662C6.23344 3.32755 6.16785 3.27372 6.0911 3.24193C6.01436 3.21014 5.92991 3.20183 5.84844 3.21803C5.76697 3.23424 5.69213 3.27424 5.63339 3.33298C5.57465 3.39171 5.53465 3.46655 5.51845 3.54802C5.50224 3.6295 5.51056 3.71394 5.54235 3.79069C5.57414 3.86743 5.62797 3.93303 5.69704 3.97918Z' fill='%2306577C'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_13957_112512'%3E%3Crect width='12' height='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
        background-repeat: no-repeat;
        background-size: 0.75rem;
        background-position: 0.5rem 0.75rem;
        border-radius: 0.5rem;
        display: flex;
        flex-direction: row;
        padding: 0.5rem 0.5rem 0.5rem 1.5rem;
        gap: 0.25rem;
        background-color: #e4f1f7;

        .alert-heading {
            text-align: left;
            font-size: 0.75rem;
            line-height: 1.25rem;
        }
    }
}
</style>
