<template>
    <t t-name="SwitchPmsMenu">
        <li class="o_switch_company_menu">
            <a
                role="button"
                class="dropdown-toggle"
                data-toggle="dropdown"
                data-display="static"
                aria-expanded="false"
                href="#"
                title="Dropdown menu"
            >
                <span
                    t-attf-class="#{widget.isMobile ? 'fa fa-building-o' : 'oe_topbar_name'}"
                >
                    <t t-if="!widget.isMobile">
                        <t t-esc="widget.current_pms_property_name" />
                    </t>
                </span>
            </a>
            <div class="dropdown-menu dropdown-menu-right" role="menu">
                <t t-foreach="widget.user_pms_properties" t-as="pms_property">
                    <div
                        class="dropdown-item d-flex py-0 px-0"
                        data-menu="pms_property"
                        t-att-data-pms_property-id="pms_property[0]"
                    >
                        <t
                            t-set="is_allowed"
                            t-value="widget.allowed_pms_property_ids.includes(pms_property[0])"
                        />
                        <t
                            t-set="is_current"
                            t-value="pms_property[0] === widget.current_pms_property"
                        />
                        <div
                            role="menuitemcheckbox"
                            t-att-aria-checked="is_allowed"
                            t-att-aria-label="pms_property[1]"
                            tabindex="0"
                            class="ml-auto pl-3 pr-3 border border-top-0 border-left-0 border-bottom-0 pms_toggle_property o_py"
                        >
                            <span style="height: 2rem;">
                                <t t-if="is_allowed">
                                    <i class="fa fa-fw fa-check-square pt-2" />
                                </t>
                                <t t-if="!is_allowed">
                                    <i class="fa fa-fw fa-square-o pt-2" />
                                </t>
                            </span>
                        </div>
                        <div
                            role="button"
                            t-att-aria-pressed="is_current"
                            aria-label="Switch to this property"
                            tabindex="0"
                            class="d-flex flex-grow-1 align-items-center py-0 pms_log_into pl-3 o_py"
                            t-att-style="is_current ? 'background-color: lightgrey;' : ''"
                        >
                            <t t-if="is_allowed">
                                <span class='mr-3 company_label'>
                                    <t t-esc="pms_property[1]" />
                                </span>
                            </t>
                            <t t-if="!is_allowed">
                                <span class='mr-3 company_label text-muted'>
                                    <t t-esc="pms_property[1]" />
                                </span>
                            </t>
                        </div>
                    </div>
                </t>
            </div>
        </li>
    </t>
</template>
