You are an expert in writing code in many different languages. Your goal is to perform code completion for the following code, keeping in mind the rest of the code and the file meta data.
    Metadata details:
    filename: alert_overlay.rs
    path of file: ./repos/kiomet/client/src/ui
    
    the code of the file until where you have to start completion: use crate::translation::TowerTranslation;
use crate::tutorial::TutorialAlert;
use crate::ui::TowerUiEvent;
use crate::TowerGame;
use common::alerts::{AlertFlag, Alerts};
use common::tower::TowerId;
use stylist::yew::styled_component;
use yew::virtual_dom::AttrValue;
use yew::{classes, hook, html, use_state, Callback, Html, MouseEvent, Properties, UseStateHandle};
use yew_frontend::frontend::use_ui_event_callback;
use yew_frontend::translation::{use_translation, Translation};
use yew_icons::{Icon, IconId};

#[derive(PartialEq, Properties)]
pub struct AlertOverlayProps {
    pub alerts: Alerts,
    pub tutorial_alert: Option<TutorialAlert>,
}

#[styled_component(AlertOverlay)]
pub fn alert_overlay(props: &AlertOverlayProps) -> Html {
    let send_event = use_ui_event_callback::<TowerGame>();
    let send_event_factory =
        |event: TowerUiEvent| -> Callback<MouseEvent> { send_event.reform(move |_| event) };

    let pan_to = send_event.reform(TowerUiEvent::PanTo);
    let pan_to_factory =
        |tower_id: TowerId| -> Callback<MouseEvent> { pan_to.reform(move |_| tower_id) };

    let overlay_css = css!(
        r#"
        font-size: 1rem;
        transition: opacity 1s;
        "#
    );

    #[hook]
    fn use_dismissible<T>() -> (UseStateHandle<bool>, Callback<T>) {
        let state = use_state(|| true);
        let state_clone = state.clone();
        (
            state,
            Callback::from(move |_| {
                state_clone.set(false);
            }),
        )
    }

    let (show_ruler_not_safe, dismiss_ruler_not_safe) = use_dismissible();
    let (show_full, dismiss_full) = use_dismissible();
    let (show_overflowing, dismiss_overflowing) = use_dismissible();
    let (show_zombies, dismiss_zombies) = use_dismissible();

    let t = use_translation();

    html! {
        <table class={overlay_css}>
            if props.alerts.flags().contains(AlertFlag::RulerUnderAttack) {
                <Alert
                    instruction={t.alert_ruler_under_attack_warning()}
                    hint={t.alert_ruler_under_attack_hint()}
                    icon_id={IconId::FontAwesomeSolidLocationCrosshairs}
                    onclick={props.alerts.ruler_position.map(pan_to_factory)}
                />
            } else if let Some(tutorial_alert) = props.tutorial_alert {
                if let TutorialAlert::Capture(tower_id) = tutorial_alert {
                    <Alert
                        instruction={t.alert_capture_instruction()}
                        hint={t.alert_capture_hint()}
                        icon_id={IconId::FontAwesomeSolidWarehouse}
    
pub fn alert_overlay(props: &AlertOverlayProps) -> Html {
    let send_event = use_ui_event_callback::<TowerGame>();
    let send_event_factory =
        |event: TowerUiEvent| -> Callback<MouseEvent> { send_event.reform(move |_| event) };

    let pan_to = send_event.reform(TowerUiEvent::PanTo);
    let pan_to_factory =
        |tower_id: TowerId| -> Callback<MouseEvent> { pan_to.reform(move |_| tower_id) };

    let overlay_css = css!(
        r#"
        font-size: 1rem;
        transition: opacity 1s;
        "#
    );

    #[hook]
    fn use_dismissible<T>() -> (UseStateHandle<bool>, Callback<T>) {
        let state = use_state(|| true);
        let state_clone = state.clone();
        (
            state,
            Callback::from(move |_| {
                state_clone.set(false);
            }),
        )
    }

    let (show_ruler_not_safe, dismiss_ruler_not_safe) = use_dismissible();
    let (show_full, dismiss_full) = use_dismissible();
    let (show_overflowing, dismiss_overflowing) = use_dismissible();
    let (show_zombies, dismiss_zombies) = use_dismissible();

    let t = use_translation();

    html! {
        <table class={overlay_css}>
            if props.alerts.flags().contains(AlertFlag::RulerUnderAttack) {
                <Alert
                    instruction={t.alert_ruler_under_attack_warning()}
                    hint={t.alert_ruler_under_attack_hint()}
                    icon_id={IconId::FontAwesomeSolidLocationCrosshairs}
                    onclick={props.alerts.ruler_position.map(pan_to_factory)}
                />
            } else if let Some(tutorial_alert) = props.tutorial_alert {
                if let TutorialAlert::Capture(tower_id) = tutorial_alert {
                    <Alert
                        instruction={t.alert_capture_instruction()}
                        hint={t.alert_capture_hint()}
                        icon_id={IconId::FontAwesomeSolidWarehouse}
                        onclick={pan_to_factory(tower_id)}
                        onclick_dismiss={send_event_factory(TowerUiEvent::DismissCaptureTutorial)}
                    />
                } else if let TutorialAlert::Upgrade(tower_id) = tutorial_alert {
                    <Alert
                        instruction={t.alert_upgrade_instruction()}
                        hint={t.alert_upgrade_hint()}
                        icon_id={IconId::FontAwesomeSolidCircleArrowUp}
                        onclick={pan_to_factory(tower_id)}
                        onclick_dismiss={send_event_factory(TowerUiEvent::DismissUpgradeTutorial)}
                    />
                }
            } else if *show_ruler_not_safe && props.alerts.flags().contains(AlertFlag::RulerNotSafe) {
                <Alert
                    instruction={t.alert_ruler_unsafe_instruction()}
                    hint={t.alert_ruler_unsafe_hint()}
                    icon_id={IconId::FontAwesomeSolidHouseCircleExclamation}
                    onclick={props.alerts.ruler_position.map(pan_to_factory)}
                    onclick_dismiss={dismiss_ruler_not_safe}
                />
            }
            if let Some(tower_id) = props.alerts.full.filter(|_| *show_full) {
                <Alert
                    instruction={t.alert_full_warning()}
                    hint={t.alert_full_hint()}
                    icon_id={IconId::BootstrapExclamationTriangleFill}
                    onclick={pan_to_factory(tower_id)}
                    onclick_dismiss={dismiss_full}
                />
            }
            if let Some(tower_id) = props.alerts.overflowing.filter(|_| *show_overflowing) {
                <Alert
                    instruction={t.alert_overflowing_warning()}
                    hint={t.alert_overflowing_hint()}
                    icon_id={IconId::FontAwesomeSolidCircleInfo}
                    onclick={pan_to_factory(tower_id)}
                    onclick_dismiss={dismiss_overflowing}
                />
            }
            if let Some(tower_id) = props.alerts.zombies.filter(|_| *show_zombies) {
                <Alert
                    instruction={t.alert_zombies_warning()}
                    hint={t.alert_zombies_hint()}
                    icon_id={IconId::FontAwesomeSolidPersonWalkingDashedLineArrowRight}
                    onclick={pan_to_factory(tower_id)}
                    onclick_dismiss={dismiss_zombies}
                />
            }
        </table>
    }
}