<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="xeno_mobile.PersonalInfo">
        <div class="o_xeno_mobile">
            <div class="o_xeno_mobile_shell">

                <div class="o_xeno_m_hero">
                    <div class="o_xeno_m_hero_top">
                        <div class="o_xeno_m_brand">XEN<span>HR</span></div>
                        <button class="o_xeno_m_home_btn" t-on-click="goHome" aria-label="Back to Attendance" title="Back to Attendance">
                            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M3 11.5 12 4l9 7.5"/>
                                <path d="M5.5 10v9a1 1 0 0 0 1 1H9a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h2.5a1 1 0 0 0 1-1v-9"/>
                            </svg>
                        </button>
                    </div>
                    <div class="o_xeno_m_hero_title">Personal Information</div>
                </div>

                <t t-if="state.loaded and !state.linked">
                    <div class="o_xeno_m_card o_xeno_m_notice">Your user isn't linked to an employee record yet. Please contact HR.</div>
                </t>

                <t t-if="state.loaded and state.linked">
                    <div class="o_xeno_m_card">
                        <div class="o_xeno_m_card_title">Contact &amp; Address</div>

                        <label class="o_xeno_m_label">Private Phone</label>
                        <input type="text" class="o_xeno_m_input" t-att-value="state.form.private_phone"
                               t-on-change="(ev) => this.onField('private_phone', ev)"/>

                        <label class="o_xeno_m_label">Private Email</label>
                        <input type="text" class="o_xeno_m_input" t-att-value="state.form.private_email"
                               t-on-change="(ev) => this.onField('private_email', ev)"/>

                        <label class="o_xeno_m_label">Emergency Contact Name</label>
                        <input type="text" class="o_xeno_m_input" t-att-value="state.form.emergency_contact"
                               t-on-change="(ev) => this.onField('emergency_contact', ev)"/>

                        <label class="o_xeno_m_label">Emergency Contact Phone</label>
                        <input type="text" class="o_xeno_m_input" t-att-value="state.form.emergency_phone"
                               t-on-change="(ev) => this.onField('emergency_phone', ev)"/>

                        <label class="o_xeno_m_label">Street</label>
                        <input type="text" class="o_xeno_m_input" t-att-value="state.form.private_street"
                               t-on-change="(ev) => this.onField('private_street', ev)"/>

                        <label class="o_xeno_m_label">Street 2</label>
                        <input type="text" class="o_xeno_m_input" t-att-value="state.form.private_street2"
                               t-on-change="(ev) => this.onField('private_street2', ev)"/>

                        <div class="o_xeno_m_field_row">
                            <div class="o_xeno_m_field">
                                <label class="o_xeno_m_label">City</label>
                                <input type="text" class="o_xeno_m_input" t-att-value="state.form.private_city"
                                       t-on-change="(ev) => this.onField('private_city', ev)"/>
                            </div>
                            <div class="o_xeno_m_field">
                                <label class="o_xeno_m_label">Zip</label>
                                <input type="text" class="o_xeno_m_input" t-att-value="state.form.private_zip"
                                       t-on-change="(ev) => this.onField('private_zip', ev)"/>
                            </div>
                        </div>

                        <label class="o_xeno_m_label">Country</label>
                        <select class="o_xeno_m_input" t-on-change="(ev) => this.onCountryChange(ev)">
                            <option value="">-</option>
                            <t t-foreach="state.countries" t-as="c" t-key="c.id">
                                <option t-att-value="c.id" t-att-selected="c.id === state.form.private_country_id"
                                        t-esc="c.name"/>
                            </t>
                        </select>

                        <label class="o_xeno_m_label">State / Province</label>
                        <select class="o_xeno_m_input" t-on-change="(ev) => this.onStateChange(ev)">
                            <option value="">-</option>
                            <t t-foreach="state.states" t-as="s" t-key="s.id">
                                <option t-att-value="s.id" t-att-selected="s.id === state.form.private_state_id"
                                        t-esc="s.name"/>
                            </t>
                        </select>

                        <button class="o_xeno_m_bigbtn" t-att-class="{ 'is_busy': state.saving }"
                                t-att-disabled="state.saving" t-on-click="onSave">
                            <t t-if="state.saving">Saving…</t>
                            <t t-else="">Save</t>
                        </button>
                    </div>

                    <div class="o_xeno_m_card_title o_xeno_m_section">My Documents</div>
                    <div class="o_xeno_m_card">
                        <input type="file" name="xenoMobileFileInput" t-ref="xenoMobileFileInput"
                               style="display:none;" t-on-change="onFileSelected"/>
                        <button class="o_xeno_m_bigbtn" t-att-class="{ 'is_busy': state.uploading }"
                                t-att-disabled="state.uploading" t-on-click="onUploadClick">
                            <t t-if="state.uploading">Uploading…</t>
                            <t t-else="">Upload Document</t>
                        </button>
                        <div t-if="!state.documents.length" class="o_xeno_m_muted mt-2">No documents uploaded yet.</div>
                        <t t-else="">
                            <div t-foreach="state.documents" t-as="doc" t-key="doc.id" class="o_xeno_m_doc_row">
                                <t t-if="state.renamingDocId === doc.id">
                                    <input type="text" class="form-control form-control-sm"
                                           t-att-value="state.renameValue"
                                           t-on-input="onRenameInput"
                                           t-on-keydown="onRenameKeydown"
                                           t-on-blur="() => this.saveRename()"/>
                                </t>
                                <t t-else="">
                                    <span t-esc="doc.name"/>
                                    <button class="btn btn-link btn-sm p-0 ms-2 text-muted"
                                            t-on-click="() => this.onRenameClick(doc)"
                                            title="Rename">
                                        <i class="fa fa-pencil"/>
                                    </button>
                                </t>
                            </div>
                        </t>
                        <div class="o_xeno_m_muted mt-2">Once uploaded, a document can only be removed by HR.</div>
                    </div>
                </t>

                <div t-if="!state.loaded" class="o_xeno_m_card o_xeno_m_loading">Loading…</div>
            </div>
        </div>
    </t>
</templates>
