@let fuelLastPrice = fuelPricesRangeConfig.value;
@let fuelLowestPrice = fuelPricesRangeConfig.minValue;
@let fuelHighestPrice = fuelPricesRangeConfig.maxValue;

@let isFuelPriceOutdated = fuelPricesRangeConfig.isOutdated;

<div class="d-flex align-itmes-center position-relative h-26 fuel-prices-range">
    @if (fuelLastPrice) {
        <!-- Fuel Last Price -->

        @let fuelPricesRange =
            {
                minValue: fuelLowestPrice,
                maxValue: fuelHighestPrice,
                totalValue: fuelLastPrice,
                isOutdated: isFuelPriceOutdated,
                isCardVariation,
            } | fuelPricesRange;

        <div
            class="d-flex align-items-center"
            (mouseenter)="onHoverFuelLastPrice()"
            (mouseleave)="onHoverFuelLastPrice()"
        >
            @let fuelPricesRangeCircleSvgClass =
                fuelPricesRangeCircleSvgClassColor[fuelPricesRange.svgClass];

            <svg-icon
                class="svg-size-10 position-relative bottom-1 m-r-4"
                [ngClass]="fuelPricesRangeCircleSvgClass"
                [src]="sharedSvgRoutes.CIRCLE"
            ></svg-icon>

            <p
                class="text-color-black-2 text-size-14 text-truncate cursor-default"
            >
                {{ fuelLastPrice | currency }}
            </p>
        </div>

        <!-- Fuel Prices Range -->

        @if (isFuelLastPriceHovered && !isFuelPriceOutdated ) {
            @let fuelPricesRangeBarContainerClass =
                isCardVariation
                    ? 'left-100 m-l-8'
                    : 'right-100 m-r-8';

            <div
                class="d-flex flex-column background-black-2 br-3 position-absolute h-26 p-b-2 p-t-8 p-x-4"
                [ngClass]="fuelPricesRangeBarContainerClass"
            >
                <!-- Range -->

                @let fuelPricesRangeBarClass =
                    isCardVariation
                        ? 'fuel-prices-range-bar-card'
                        : 'fuel-prices-range-bar-table';

                <div
                    class="d-grid align-items-center h-4 position-relative fuel-prices-range-bar"
                    [ngClass]="fuelPricesRangeBarClass"
                >
                    @for (
                        fuelPriceColor of fuelPricesRangeColor;
                        track fuelPriceColor
                    ) {
                        <div
                            class="h-4 fuel-prices-range-bar-box"
                            [ngStyle]="{
                                'background-color': fuelPriceColor,
                            }"
                        ></div>
                    }

                    <!-- Range Icon -->

                    @let fuelPricesRangeArrowSvgClass =
                        fuelPricesRangeArrowSvgClassColor[
                            fuelPricesRange.svgClass
                        ];

                    @let fuelPricesRangeArrowSvgStyle =
                        {
                            left:
                                fuelPricesRange.svgPosition +
                                eUnit.PERCENTAGE_SIGN,
                        };

                    <svg-icon
                        class="position-absolute top--14"
                        [ngClass]="fuelPricesRangeArrowSvgClass"
                        [ngStyle]="fuelPricesRangeArrowSvgStyle"
                        [src]="sharedSvgRoutes.LAST_PRICE_ARROW_DOWN"
                    ></svg-icon>
                </div>

                <!-- Range Value -->

                <div class="d-flex align-items-center justify-content-between">
                    <p
                        class="text-color-white text-size-11 line-height-12 ca-font-semi-bold"
                    >
                        {{ fuelLowestPrice | currency }}
                    </p>

                    <p
                        class="text-color-white text-size-11 line-height-12 ca-font-semi-bold"
                    >
                        {{ fuelHighestPrice | currency }}
                    </p>
                </div>
            </div>
        }
    }
</div>