<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="xeno_theme_slate.CompanyPolicies">
        <div class="xeno_policies_page p-4">
            <h2 class="mb-1">Company Policies</h2>
            <p class="text-muted mb-4">Current company policies, in one place.</p>

            <div t-if="state.loading" class="text-muted">Loading…</div>
            <div t-elif="!state.policies.length" class="text-muted">No company policies yet.</div>
            <div t-else="" class="xeno_policies_layout">
                <div class="xeno_policies_list">
                    <div t-foreach="state.policies" t-as="policy" t-key="policy.id"
                         t-attf-class="xeno_policies_list_item {{
                            state.selected and state.selected.id === policy.id ? 'active' : '' }}"
                         t-on-click="() => this.selectPolicy(policy.id)">
                        <div class="xeno_policies_list_name" t-esc="policy.name"/>
                        <div class="xeno_policies_list_meta">
                            <span t-if="policy.typeLabel" class="xeno_policies_type_badge" t-esc="policy.typeLabel"/>
                            <span t-if="policy.publishDate"> · <t t-esc="policy.publishDate"/></span>
                        </div>
                    </div>
                </div>

                <div t-if="state.selected" class="xeno_policies_content">
                    <div class="xeno_policies_content_header">
                        <h3 t-esc="state.selected.name"/>
                        <div class="text-muted">
                            <span t-if="state.selected.typeLabel" class="xeno_policies_type_badge" t-esc="state.selected.typeLabel"/>
                            <span t-if="state.selected.publishDate"> · Published <t t-esc="state.selected.publishDate"/></span>
                        </div>
                    </div>
                    <div class="xeno_policies_body" t-out="state.selected.body"/>
                </div>
            </div>
        </div>
    </t>
</templates>
