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

    <tr t-name="mrp.BomOverviewLine" t-on-click="() => this.props.toggleFolded(identifier)">
        <td name="td_mrp_bom">
            <div class="text-truncate" t-attf-style="margin-left: {{ marginMultiplicator * 20 }}px">
                <t t-if="hasFoldButton">
                    <t t-set="title_fold">Fold</t>
                    <t t-set="title_unfold">Unfold</t>
                    <span class="o_mrp_bom_unfoldable btn btn-light p-0" t-att-aria-label="props.isFolded ? title_unfold : title_fold" t-att-title="props.isFolded ? title_unfold : title_fold" style="margin-right: 1px">
                        <i t-attf-class="fa fa-fw fa-caret-{{ props.isFolded ? 'right' : 'down' }}" role="img"/>
                    </span>
                </t>
                <a href="#" t-on-click.prevent="() => this.goToAction(data.link_id, data.link_model)" t-esc="data.name"/>
                <t t-if="data.phantom_bom">
                    <div class="fa fa-dropbox" title="This is a BoM of type Kit!" role="img" aria-label="This is a BoM of type Kit!"/>
                </t>
            </div>
        </td>
        <td class="text-end">
            <t t-if="data.type == 'operation'" t-esc="formatFloatTime(data.quantity)"/>
            <t t-else="" t-esc="formatFloat(data.quantity, {'digits': [false, precision]})"/>
        </td>
        <td t-if="showUom" class="text-start" t-esc="data.uom_name"/>
        <td t-if="forecastMode" class="text-end">
            <t t-if="hasQuantity">
                <t t-esc="formatFloat(data.quantity_available, {'digits': [false, precision]})"/> /
                <t t-esc="formatFloat(data.quantity_on_hand, {'digits': [false, precision]})"/>
            </t>
        </td>
        <td t-if="forecastMode" class="text-center">
            <div t-if="data.hasOwnProperty('status')" class="o_field_badge">
                <span t-attf-class="badge rounded-pill o_mrp_overview_badge {{statusBackgroundClass}}" t-out="data.status"/>
            </div>
        </td>
        <td t-if="forecastMode" class="text-center">
            <t t-if="data.hasOwnProperty('availability_state')">
                <span t-attf-class="{{availabilityColorClass}}" t-esc="data.availability_display"/>
                <t t-if="['bom', 'component'].includes(data.type)">
                    <a href="#" role="button" t-on-click.prevent="goToForecast" title="Forecast Report" t-attf-class="fa fa-fw fa-area-chart o_mrp_bom_forecast ms-1 {{availabilityColorClass}}"/>
                </t>
            </t>
        </td>
        <td t-if="forecastMode" class="text-end">
            <span t-if="hasLeadTime"><t t-esc="data.lead_time"/> Days</span>
        </td>
        <td t-if="forecastMode">
            <div t-if="data.route_name">
                <span t-attf-class="{{ data.route_alert ? 'text-danger' : '' }}"><t t-esc="data.route_name"/>: </span>
                <a href="#" t-on-click.prevent="() => this.goToRoute(data.route_type)" t-esc="data.route_detail"/>
            </div>
        </td>
        <td t-else=""/>
        <td t-attf-class="text-end {{ data.type == 'component' ? 'opacity-50' : '' }}" t-esc="formatMonetary(data.bom_cost)"/>
        <td t-if="showAttachments" class="text-center">
            <span t-if="data.has_attachments">
                <a href="#" role="button" t-on-click.prevent="goToAttachment" class="fa fa-fw o_button_icon fa-files-o"/>
            </span>
        </td>
    </tr>

</templates>
