<template>
    <div class="time-slots-question">
        <buttonQuestion
            v-if="isDropOffAppointmentAvailable"
            v-model="selectedAnswerForDropOffOrInshop"
            :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="mb-4 drop-off-alert"
                    :cmsWidgetName="dropOffTimeSlotAlertCMSWidgetName"
                    alertClass="alert-info"
                    v-bind:isDismissible="false" />
            </div>
        </buttonQuestion>
        <buttonQuestion
            ref="buttonQuestion"
            v-if="shouldDisplayTimeSlotQuestion"
            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 && selectedDate"
            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 && selectedDate"
            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";
import { getDisplayTextForDurationLength } from "@/helpers/duration-length-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", "TimeSlotSelected", "click-event"],
    props: {
        modelValue: {
            type: Object,
            default: () => ({
                timeSlot: {
                    routeCode: null,
                    date: null,
                    startTime: null,
                    endTime: null,
                    jobMaxMinutes: null,
                    jobMinMinutes: null,
                },
                isPremiumAppointment: null,
            }),
        },
        cmsWidgetName: String,
        mobileCmsWidgetName: String,
        mobilePremiumCmsWidgetName: String,
        dropoffCmsWidgetName: String,
        sameDayDropOffCmsWidgetName: String,
        overnightDropOffCmsWidgetName: String,
        dropOffOrPickATimeQuestionCmsWidgetName: String,
        appointmentType: String,
        timeSlotsForSelectedDate: Object,
        premiumAppointmentFee: Object,
        estimatedServiceMinutesMinimum: Number,
        estimatedServiceMinutesMaximum: Number,
        validationRules: String,
        customComponentId: String,
        selectedDate: String,
        displayWaitList: Boolean,
    },
    data() {
        return {
            selectedRouteCode: null,
            timeSlotModalListButton: timeSlotModalListButton,
            selectedAnswerForDropOffOrInshop: null,
            selectedAnswerForTimeSlots: null,
        };
    },
    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,
        };
    },
    computed: {
        supplementalInformationBlock() {
            let appointmentTypeCmsWidgetName;

            if (
                this.selectedDate == null ||
                this.appointmentType === AppointmentTypeStrings.IN_SHOP_OR_DROP_OFF ||
                this.appointmentType === AppointmentTypeStrings.IN_SHOP ||
                this.appointmentType === AppointmentTypeStrings.DROP_OFF ||
                !this.availableTimeSlots
            ) {
                if (!this.selectedAnswerForTimeSlots && !this.selectedAnswerForDropOffOrInshop) {
                    this.autoSelectTimeSlotIfOnlyOneIsAvailable();
                }
                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 {
                if (!this.selectedAnswerForTimeSlots && this.selectedRouteCode) {
                    // Clearing selectedRouteCode if no time slot is selected
                    this.resetSelectedTimeSlot();
                }
                appointmentTypeCmsWidgetName = this.selectedRouteCode?.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;
        //     }
        // },
        isSameDay() {
            if (!this.timeSlotsForSelectedDate) {
                return false;
            }
            const todaysDate = new Date().toISOString().split("T")[0];
            return this.selectedDate === todaysDate;
        },
        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: {
        initializeComponent() {
            this.setSelectedRouteCodeFromParent();
        },
        async setSelectedTimeSlot() {
            this.selectedRouteCode =
                this.selectedAnswerForTimeSlots || this.selectedAnswerForDropOffOrInshop;
            this.$emit(
                "update:modelValue",
                this.getSelectedTimeSlotInfoObject(this.selectedRouteCode)
            );
        },
        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])
                );
            }

            this.resetSelectedTimeSlotIfDateChange(timeSlotsForSelectedDate);

            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,
                },
            };
        },
        setSelectedRouteCodeFromParent() {
            if (!this.modelValue?.timeSlot?.routeCode) {
                return;
            }
            const routeCodeFromParent = this.modelValue.timeSlot.routeCode;
            if (this.modelValue?.isPremiumAppointment) {
                // Mobile Only
                this.selectedAnswerForTimeSlots = this.addPremiumFlagToInput(routeCodeFromParent);
            } else {
                if (isDropOffRouteCode(routeCodeFromParent)) {
                    this.selectedAnswerForDropOffOrInshop = routeCodeFromParent;
                } else {
                    this.selectedAnswerForDropOffOrInshop = PICK_A_TIME_BUTTON_VALUE;
                    this.selectedAnswerForTimeSlots = routeCodeFromParent;
                }
            }
        },
        getWaitListRequestedFromStore() {
            return store.getters.order.customer?.waitListRequested;
        },
        autoSelectTimeSlotIfOnlyOneIsAvailable() {
            const numberOfOptions = this.timeSlotsForSelectedDate?.timeSlots?.length;
            if (this.appointmentType && numberOfOptions === 1) {
                if (this.availableTimeSlots.length > 0) {
                    this.selectedAnswerForTimeSlots = this.availableTimeSlots[0].value;
                } else {
                    this.selectedAnswerForDropOffOrInshop = this.answersForDropOffQuestion[0].value;
                }
                this.setSelectedTimeSlot();
            }
        },
        addPremiumFlagToInput(routeCode) {
            return (routeCode += PREMIUM_TIME_SLOT_ID_FLAG);
        },
        removePremiumFlagFromInput(routeCode) {
            return routeCode.replace(PREMIUM_TIME_SLOT_ID_FLAG, "");
        },
        getSelectedTimeSlotInfoObject(routeCode) {
            const routeCodeIncludesPremium = routeCode?.includes(PREMIUM_TIME_SLOT_ID_FLAG);
            if (routeCodeIncludesPremium) {
                routeCode = this.removePremiumFlagFromInput(routeCode);
            }
            const timeSlot = this.timeSlotsForSelectedDate?.timeSlots?.find(
                (slot) => slot.id == routeCode
            );

            if (timeSlot) {
                return {
                    timeSlot: {
                        date: this.timeSlotsForSelectedDate.date,
                        routeCode: timeSlot.id,
                        startTime: timeSlot.startTime,
                        endTime: timeSlot.endTime,
                        jobMaxMinutes: this.estimatedServiceMinutesMaximum?.toString() || null,
                        jobMinMinutes: this.estimatedServiceMinutesMinimum?.toString() || null,
                    },
                    isPremiumAppointment: routeCodeIncludesPremium ? true : false,
                };
            }

            return {
                timeSlot: {
                    date: null,
                    routeCode: null,
                    startTime: null,
                    endTime: null,
                    jobMaxMinutes: null,
                    jobMinMinutes: null,
                },
                isPremiumAppointment: null,
            };
        },
        waitListChecked(event) {
            this.$emit("waitListRequested", event.target.checked);
        },
        scrollToSuccessMessage() {
            const successMessageElement = this.$refs.waitlistSuccessMessage;
            if (successMessageElement) {
                successMessageElement.scrollIntoView({ behavior: "smooth" });
            }
        },
        resetSelectedTimeSlotIfDateChange(timeSlotsForSelectedDate) {
            if (this.selectedRouteCode) {
                const selectedRouteCodeString = this.selectedRouteCode.replace(
                    PREMIUM_TIME_SLOT_ID_FLAG,
                    ""
                );
                const matchingTimeSlot = timeSlotsForSelectedDate.find((slot) => {
                    return slot.id === selectedRouteCodeString;
                });
                if (!matchingTimeSlot) {
                    this.resetSelectedTimeSlot();
                }
            }
        },
        resetSelectedTimeSlot() {
            this.selectedRouteCode = null;
        },
    },
    watch: {
        waitListRequested(newVal) {
            if (newVal) {
                this.$nextTick(() => {
                    this.scrollToSuccessMessage();
                });
            }
        },
        modelValue: {
            handler(newValue) {
                this.handleChange(newValue);
            },
            deep: true,
        },
        selectedDate: {
            handler() {
                this.resetSelectedTimeSlot();
                this.selectedAnswerForDropOffOrInshop = null;
                this.selectedAnswerForTimeSlots = null;
                this.autoSelectTimeSlotIfOnlyOneIsAvailable();
            },
        },
        selectedRouteCode(newValue) {
            if (newValue) {
                this.setSelectedTimeSlot();
            }
        },
        selectedAnswerForDropOffOrInshop(newValue) {
            if (newValue == PICK_A_TIME_BUTTON_VALUE) {
                this.selectedRouteCode = null;
                this.setSelectedTimeSlot();
            } else {
                this.selectedAnswerForTimeSlots = null;
                this.selectedRouteCode = newValue;
            }
        },
        selectedAnswerForTimeSlots(newValue) {
            if (newValue) {
                this.selectedRouteCode = newValue;
            }
        },
    },
    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>
