<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

    <t t-name="mail.VoiceRecorder">
        <div class="o-mail-VoiceRecorder d-flex align-items-center" t-att-class="{ 'o-recording rounded': state.recording }">
            <t t-set="title"><t t-if="!state.recording">Voice Message</t><t t-else="">Stop Recording</t></t>
            <div class="o-mail-VoiceRecorder-elapsed" t-att-class="{
                'o-active recording ms-2 me-1': state.recording,
                'mw-0': !state.recording,
                'text-danger': state.limitWarning,
            }" style="font-variant-numeric: tabular-nums;"><span class="d-flex text-truncate" t-esc="state.elapsed"/></div>
            <button t-att-disabled="state.isActionPending or props.composer.voiceAttachment" class="border-0 btn rounded-pill" t-att-title="title" t-on-click="onClick"><i t-att-class="!state.recording ? 'fa fa-microphone' : 'fa fa-circle text-danger o-mail-VoiceRecorder-dot'"/></button>
        </div>
    </t>

</templates>
