<div class="flex w-full flex-auto flex-col">
    <div class="mx-auto flex w-full max-w-screen-xl flex-wrap p-6 md:p-8">
        <!-- Title and action buttons -->
        <div class="flex w-full items-center justify-between">
            <div>
                <div class="text-3xl font-semibold leading-8 tracking-tight">
                    Analytics dashboard
                </div>
                <div class="text-secondary font-medium tracking-tight">
                    Monitor metrics, check reports and review performance
                </div>
            </div>
            <div class="ml-6 flex items-center">
                <button class="hidden sm:inline-flex" mat-stroked-button>
                    <mat-icon
                        class="icon-size-5"
                        [svgIcon]="'heroicons_solid:cog-8-tooth'"
                    ></mat-icon>
                    <span class="ml-2">Settings</span>
                </button>
                <button
                    class="ml-3 hidden sm:inline-flex"
                    mat-flat-button
                    [color]="'primary'"
                >
                    <mat-icon
                        class="icon-size-5"
                        [svgIcon]="'heroicons_solid:arrow-up-tray'"
                    ></mat-icon>
                    <span class="ml-2">Export</span>
                </button>

                <!-- Actions menu (visible on xs) -->
                <div class="sm:hidden">
                    <button [matMenuTriggerFor]="actionsMenu" mat-icon-button>
                        <mat-icon
                            [svgIcon]="'heroicons_outline:ellipsis-vertical'"
                        ></mat-icon>
                    </button>
                    <mat-menu #actionsMenu="matMenu">
                        <button mat-menu-item>Export</button>
                        <button mat-menu-item>Settings</button>
                    </mat-menu>
                </div>
            </div>
        </div>

        <div
            class="mt-8 grid w-full grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"
        >
            <!-- Visitors overview -->
            <div
                class="bg-card dark flex flex-auto flex-col overflow-hidden rounded-2xl shadow sm:col-span-2 lg:col-span-3"
            >
                <div
                    class="ml-10 mr-6 mt-10 flex items-center justify-between sm:mr-10"
                >
                    <div class="flex flex-col">
                        <div
                            class="mr-4 text-2xl font-semibold leading-7 tracking-tight md:text-3xl"
                        >
                            Visitors Overview
                        </div>
                        <div class="text-secondary font-medium">
                            Number of unique visitors
                        </div>
                    </div>
                    <div class="ml-2">
                        <mat-button-toggle-group
                            class="hidden space-x-1 border-none sm:inline-flex"
                            value="this-year"
                            #visitorsYearSelector="matButtonToggleGroup"
                        >
                            <mat-button-toggle
                                class="overflow-hidden rounded-full border-none px-1.5 font-medium"
                                value="last-year"
                                >Last Year
                            </mat-button-toggle>
                            <mat-button-toggle
                                class="overflow-hidden rounded-full border-none px-1.5 font-medium"
                                value="this-year"
                                >This Year
                            </mat-button-toggle>
                        </mat-button-toggle-group>
                        <div class="sm:hidden">
                            <button
                                mat-icon-button
                                [matMenuTriggerFor]="visitorsMenu"
                            >
                                <mat-icon
                                    [svgIcon]="
                                        'heroicons_outline:ellipsis-vertical'
                                    "
                                ></mat-icon>
                            </button>
                            <mat-menu #visitorsMenu="matMenu">
                                <button mat-menu-item>This Year</button>
                                <button mat-menu-item>Last Year</button>
                            </mat-menu>
                        </div>
                    </div>
                </div>
                <div class="flex h-80 flex-auto flex-col">
                    <apx-chart
                        class="h-full w-full flex-auto"
                        [chart]="chartVisitors.chart"
                        [colors]="chartVisitors.colors"
                        [dataLabels]="chartVisitors.dataLabels"
                        [fill]="chartVisitors.fill"
                        [grid]="chartVisitors.grid"
                        [series]="
                            chartVisitors.series[visitorsYearSelector.value]
                        "
                        [stroke]="chartVisitors.stroke"
                        [tooltip]="chartVisitors.tooltip"
                        [xaxis]="chartVisitors.xaxis"
                        [yaxis]="chartVisitors.yaxis"
                    ></apx-chart>
                </div>
            </div>
            <!-- Conversions -->
            <div
                class="bg-card flex flex-auto flex-col overflow-hidden rounded-2xl shadow sm:col-span-2 lg:col-span-1"
            >
                <div class="m-6 mb-0 flex items-start justify-between">
                    <div
                        class="truncate text-lg font-medium leading-6 tracking-tight"
                    >
                        Conversions
                    </div>
                    <div class="ml-2">
                        <button
                            class="bg-hover h-6 min-h-6 rounded-full px-2"
                            mat-button
                            [matMenuTriggerFor]="conversionMenu"
                        >
                            <span class="text-secondary text-sm font-medium"
                                >30 days</span
                            >
                        </button>
                        <mat-menu #conversionMenu="matMenu">
                            <button mat-menu-item>30 days</button>
                            <button mat-menu-item>3 months</button>
                            <button mat-menu-item>9 months</button>
                        </mat-menu>
                    </div>
                </div>
                <div
                    class="mx-6 mt-3 flex flex-col lg:flex-row lg:items-center"
                >
                    <div
                        class="text-7xl font-bold leading-tight tracking-tighter"
                    >
                        {{ data.conversions.amount | number: '1.0-0' }}
                    </div>
                    <div class="flex lg:ml-3 lg:flex-col">
                        <mat-icon
                            class="text-red-500 icon-size-5"
                            [svgIcon]="'heroicons_mini:arrow-trending-down'"
                        ></mat-icon>
                        <div
                            class="text-secondary ml-1 flex items-center whitespace-nowrap text-md leading-none lg:ml-0 lg:mt-0.5"
                        >
                            <span class="font-medium text-red-500">2%</span>
                            <span class="ml-1">below target</span>
                        </div>
                    </div>
                </div>
                <div class="flex h-20 flex-auto flex-col">
                    <apx-chart
                        class="h-full w-full flex-auto"
                        [chart]="chartConversions.chart"
                        [colors]="chartConversions.colors"
                        [series]="chartConversions.series"
                        [stroke]="chartConversions.stroke"
                        [tooltip]="chartConversions.tooltip"
                        [xaxis]="chartConversions.xaxis"
                        [yaxis]="chartConversions.yaxis"
                    ></apx-chart>
                </div>
            </div>
            <!-- Impressions -->
            <div
                class="bg-card flex flex-auto flex-col overflow-hidden rounded-2xl shadow"
            >
                <div class="m-6 mb-0 flex items-start justify-between">
                    <div
                        class="truncate text-lg font-medium leading-6 tracking-tight"
                    >
                        Impressions
                    </div>
                    <div class="ml-2">
                        <button
                            class="bg-hover h-6 min-h-6 rounded-full px-2"
                            mat-button
                            [matMenuTriggerFor]="impressionsMenu"
                        >
                            <span class="text-secondary text-sm font-medium"
                                >30 days</span
                            >
                        </button>
                        <mat-menu #impressionsMenu="matMenu">
                            <button mat-menu-item>30 days</button>
                            <button mat-menu-item>3 months</button>
                            <button mat-menu-item>9 months</button>
                        </mat-menu>
                    </div>
                </div>
                <div
                    class="mx-6 mt-3 flex flex-col lg:flex-row lg:items-center"
                >
                    <div
                        class="text-7xl font-bold leading-tight tracking-tighter"
                    >
                        {{ data.impressions.amount | number: '1.0-0' }}
                    </div>
                    <div class="flex lg:ml-3 lg:flex-col">
                        <mat-icon
                            class="text-red-500 icon-size-5"
                            [svgIcon]="'heroicons_mini:arrow-trending-down'"
                        ></mat-icon>
                        <div
                            class="text-secondary ml-1 flex items-center whitespace-nowrap text-md leading-none lg:ml-0 lg:mt-0.5"
                        >
                            <span class="font-medium text-red-500">4%</span>
                            <span class="ml-1">below target</span>
                        </div>
                    </div>
                </div>
                <div class="flex h-20 flex-auto flex-col">
                    <apx-chart
                        class="h-full w-full flex-auto"
                        [chart]="chartImpressions.chart"
                        [colors]="chartImpressions.colors"
                        [series]="chartImpressions.series"
                        [stroke]="chartImpressions.stroke"
                        [tooltip]="chartImpressions.tooltip"
                        [xaxis]="chartImpressions.xaxis"
                        [yaxis]="chartImpressions.yaxis"
                    ></apx-chart>
                </div>
            </div>
            <!-- Visits -->
            <div
                class="bg-card flex flex-auto flex-col overflow-hidden rounded-2xl shadow"
            >
                <div class="m-6 mb-0 flex items-start justify-between">
                    <div
                        class="truncate text-lg font-medium leading-6 tracking-tight"
                    >
                        Visits
                    </div>
                    <div class="ml-2">
                        <button
                            class="bg-hover h-6 min-h-6 rounded-full px-2"
                            mat-button
                            [matMenuTriggerFor]="impressionsMenu"
                        >
                            <span class="text-secondary text-sm font-medium"
                                >30 days</span
                            >
                        </button>
                        <mat-menu #impressionsMenu="matMenu">
                            <button mat-menu-item>30 days</button>
                            <button mat-menu-item>3 months</button>
                            <button mat-menu-item>9 months</button>
                        </mat-menu>
                    </div>
                </div>
                <div
                    class="mx-6 mt-3 flex flex-col lg:flex-row lg:items-center"
                >
                    <div
                        class="text-7xl font-bold leading-tight tracking-tighter"
                    >
                        {{ data.visits.amount | number: '1.0-0' }}
                    </div>
                    <div class="flex lg:ml-3 lg:flex-col">
                        <mat-icon
                            class="text-red-500 icon-size-5"
                            [svgIcon]="'heroicons_mini:arrow-trending-down'"
                        ></mat-icon>
                        <div
                            class="text-secondary ml-1 flex items-center whitespace-nowrap text-md leading-none lg:ml-0 lg:mt-0.5"
                        >
                            <span class="font-medium text-red-500">4%</span>
                            <span class="ml-1">below target</span>
                        </div>
                    </div>
                </div>
                <div class="flex h-20 flex-auto flex-col">
                    <apx-chart
                        class="h-full w-full flex-auto"
                        [chart]="chartVisits.chart"
                        [colors]="chartVisits.colors"
                        [series]="chartVisits.series"
                        [stroke]="chartVisits.stroke"
                        [tooltip]="chartVisits.tooltip"
                        [xaxis]="chartVisits.xaxis"
                        [yaxis]="chartVisits.yaxis"
                    ></apx-chart>
                </div>
            </div>
        </div>

        <!-- Visitors vs. Page Views -->
        <div
            class="bg-card mt-8 flex flex-auto flex-col overflow-hidden rounded-2xl shadow"
        >
            <div class="m-6 mb-0 flex items-start justify-between">
                <div
                    class="truncate text-lg font-medium leading-6 tracking-tight"
                >
                    Visitors vs. Page Views
                </div>
                <div class="ml-2">
                    <button
                        class="bg-hover h-6 min-h-6 rounded-full px-2"
                        mat-button
                        [matMenuTriggerFor]="conversionMenu"
                    >
                        <span class="text-secondary text-sm font-medium"
                            >30 days</span
                        >
                    </button>
                    <mat-menu #conversionMenu="matMenu">
                        <button mat-menu-item>30 days</button>
                        <button mat-menu-item>3 months</button>
                        <button mat-menu-item>9 months</button>
                    </mat-menu>
                </div>
            </div>
            <div class="mx-6 mt-6 flex items-start">
                <div class="grid grid-cols-1 gap-8 sm:grid-cols-3 sm:gap-12">
                    <div class="flex flex-col">
                        <div class="flex items-center">
                            <div class="text-secondary font-medium leading-5">
                                Overall Score
                            </div>
                            <mat-icon
                                class="text-hint ml-1.5 icon-size-4"
                                [svgIcon]="'heroicons_mini:information-circle'"
                                [matTooltip]="
                                    'Score is calculated by using the historical ratio between Page Views and Visitors. Best score is 1000, worst score is 0.'
                                "
                            ></mat-icon>
                        </div>
                        <div class="mt-2 flex items-start">
                            <div
                                class="text-4xl font-bold leading-none tracking-tight"
                            >
                                {{ data.visitorsVsPageViews.overallScore }}
                            </div>
                            <div class="ml-2 flex items-center">
                                <mat-icon
                                    class="text-green-500 icon-size-5"
                                    [svgIcon]="
                                        'heroicons_solid:arrow-up-circle'
                                    "
                                ></mat-icon>
                                <div
                                    class="ml-1 text-md font-medium text-green-500"
                                >
                                    42.9%
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex flex-col">
                        <div class="flex items-center">
                            <div class="text-secondary font-medium leading-5">
                                Average Ratio
                            </div>
                            <mat-icon
                                class="text-hint ml-1.5 icon-size-4"
                                [svgIcon]="'heroicons_mini:information-circle'"
                                [matTooltip]="
                                    'Average Ratio is the average ratio between Page Views and Visitors'
                                "
                            ></mat-icon>
                        </div>
                        <div class="mt-2 flex items-start">
                            <div
                                class="text-4xl font-bold leading-none tracking-tight"
                            >
                                {{
                                    data.visitorsVsPageViews.averageRatio
                                        | number: '1.0-0'
                                }}%
                            </div>
                            <div class="ml-2 flex items-center">
                                <mat-icon
                                    class="text-red-500 icon-size-5"
                                    [svgIcon]="
                                        'heroicons_solid:arrow-down-circle'
                                    "
                                ></mat-icon>
                                <div
                                    class="ml-1 text-md font-medium text-red-500"
                                >
                                    13.1%
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex flex-col">
                        <div class="flex items-center">
                            <div class="text-secondary font-medium leading-5">
                                Predicted Ratio
                            </div>
                            <mat-icon
                                class="text-hint ml-1.5 icon-size-4"
                                [svgIcon]="'heroicons_mini:information-circle'"
                                [matTooltip]="
                                    'Predicted Ratio is calculated by using historical ratio, current trends and your goal targets.'
                                "
                            ></mat-icon>
                        </div>
                        <div class="mt-2 flex items-start">
                            <div
                                class="text-4xl font-bold leading-none tracking-tight"
                            >
                                {{
                                    data.visitorsVsPageViews.predictedRatio
                                        | number: '1.0-0'
                                }}%
                            </div>
                            <div class="ml-2 flex items-center">
                                <mat-icon
                                    class="text-green-500 icon-size-5"
                                    [svgIcon]="
                                        'heroicons_solid:arrow-up-circle'
                                    "
                                ></mat-icon>
                                <div
                                    class="ml-1 text-md font-medium text-green-500"
                                >
                                    22.2%
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mt-3 flex h-80 flex-auto flex-col">
                <apx-chart
                    class="h-full w-full flex-auto"
                    [chart]="chartVisitorsVsPageViews.chart"
                    [colors]="chartVisitorsVsPageViews.colors"
                    [dataLabels]="chartVisitorsVsPageViews.dataLabels"
                    [grid]="chartVisitorsVsPageViews.grid"
                    [legend]="chartVisitorsVsPageViews.legend"
                    [series]="chartVisitorsVsPageViews.series"
                    [stroke]="chartVisitorsVsPageViews.stroke"
                    [tooltip]="chartVisitorsVsPageViews.tooltip"
                    [xaxis]="chartVisitorsVsPageViews.xaxis"
                    [yaxis]="chartVisitorsVsPageViews.yaxis"
                ></apx-chart>
            </div>
        </div>

        <!-- Section title -->
        <div class="mt-12 w-full">
            <div class="text-2xl font-semibold leading-6 tracking-tight">
                Your Audience
            </div>
            <div class="text-secondary font-medium tracking-tight">
                Demographic properties of your users
            </div>
        </div>
        <div
            class="mt-6 grid w-full grid-cols-1 gap-8 sm:grid-cols-2 md:mt-8 lg:grid-cols-4"
        >
            <!-- New vs. Returning -->
            <div
                class="bg-card flex flex-auto flex-col overflow-hidden rounded-2xl p-6 shadow"
            >
                <div class="flex items-start justify-between">
                    <div
                        class="truncate text-lg font-medium leading-6 tracking-tight"
                    >
                        New vs. Returning
                    </div>
                    <div class="ml-2">
                        <button
                            class="bg-hover h-6 min-h-6 rounded-full px-2"
                            mat-button
                            [matMenuTriggerFor]="conversionMenu"
                        >
                            <span class="text-secondary text-sm font-medium"
                                >30 days</span
                            >
                        </button>
                        <mat-menu #conversionMenu="matMenu">
                            <button mat-menu-item>30 days</button>
                            <button mat-menu-item>3 months</button>
                            <button mat-menu-item>9 months</button>
                        </mat-menu>
                    </div>
                </div>
                <div class="mt-6 flex h-44 flex-auto flex-col">
                    <apx-chart
                        class="flex h-full w-full flex-auto items-center justify-center"
                        [chart]="chartNewVsReturning.chart"
                        [colors]="chartNewVsReturning.colors"
                        [labels]="chartNewVsReturning.labels"
                        [plotOptions]="chartNewVsReturning.plotOptions"
                        [series]="chartNewVsReturning.series"
                        [states]="chartNewVsReturning.states"
                        [tooltip]="chartNewVsReturning.tooltip"
                    ></apx-chart>
                </div>
                <div class="mt-8">
                    <div class="-my-3 divide-y">
                        @for (
                            dataset of data.newVsReturning.series;
                            track dataset;
                            let i = $index
                        ) {
                            <div class="grid grid-cols-3 py-3">
                                <div class="flex items-center">
                                    <div
                                        class="h-2 w-2 flex-0 rounded-full"
                                        [style.backgroundColor]="
                                            chartNewVsReturning.colors[i]
                                        "
                                    ></div>
                                    <div class="ml-3 truncate">
                                        {{ data.newVsReturning.labels[i] }}
                                    </div>
                                </div>
                                <div class="text-right font-medium">
                                    {{
                                        (data.newVsReturning.uniqueVisitors *
                                            dataset) /
                                            100 | number: '1.0-0'
                                    }}
                                </div>
                                <div class="text-secondary text-right">
                                    {{ dataset }}%
                                </div>
                            </div>
                        }
                    </div>
                </div>
            </div>
            <!-- Gender -->
            <div
                class="bg-card flex flex-auto flex-col overflow-hidden rounded-2xl p-6 shadow"
            >
                <div class="flex items-start justify-between">
                    <div
                        class="truncate text-lg font-medium leading-6 tracking-tight"
                    >
                        Gender
                    </div>
                    <div class="ml-2">
                        <button
                            class="bg-hover h-6 min-h-6 rounded-full px-2"
                            mat-button
                            [matMenuTriggerFor]="conversionMenu"
                        >
                            <span class="text-secondary text-sm font-medium"
                                >30 days</span
                            >
                        </button>
                        <mat-menu #conversionMenu="matMenu">
                            <button mat-menu-item>30 days</button>
                            <button mat-menu-item>3 months</button>
                            <button mat-menu-item>9 months</button>
                        </mat-menu>
                    </div>
                </div>
                <div class="mt-6 flex h-44 flex-auto flex-col">
                    <apx-chart
                        class="flex h-full w-full flex-auto items-center justify-center"
                        [chart]="chartGender.chart"
                        [colors]="chartGender.colors"
                        [labels]="chartGender.labels"
                        [plotOptions]="chartGender.plotOptions"
                        [series]="chartGender.series"
                        [states]="chartGender.states"
                        [tooltip]="chartGender.tooltip"
                    ></apx-chart>
                </div>
                <div class="mt-8">
                    <div class="-my-3 divide-y">
                        @for (
                            dataset of data.gender.series;
                            track dataset;
                            let i = $index
                        ) {
                            <div class="grid grid-cols-3 py-3">
                                <div class="flex items-center">
                                    <div
                                        class="h-2 w-2 flex-0 rounded-full"
                                        [style.backgroundColor]="
                                            chartGender.colors[i]
                                        "
                                    ></div>
                                    <div class="ml-3 truncate">
                                        {{ data.gender.labels[i] }}
                                    </div>
                                </div>
                                <div class="text-right font-medium">
                                    {{
                                        (data.gender.uniqueVisitors * dataset) /
                                            100 | number: '1.0-0'
                                    }}
                                </div>
                                <div class="text-secondary text-right">
                                    {{ dataset }}%
                                </div>
                            </div>
                        }
                    </div>
                </div>
            </div>
            <!-- Age -->
            <div
                class="bg-card flex flex-auto flex-col overflow-hidden rounded-2xl p-6 shadow"
            >
                <div class="flex items-start justify-between">
                    <div
                        class="truncate text-lg font-medium leading-6 tracking-tight"
                    >
                        Age
                    </div>
                    <div class="ml-2">
                        <button
                            class="bg-hover h-6 min-h-6 rounded-full px-2"
                            mat-button
                            [matMenuTriggerFor]="conversionMenu"
                        >
                            <span class="text-secondary text-sm font-medium"
                                >30 days</span
                            >
                        </button>
                        <mat-menu #conversionMenu="matMenu">
                            <button mat-menu-item>30 days</button>
                            <button mat-menu-item>3 months</button>
                            <button mat-menu-item>9 months</button>
                        </mat-menu>
                    </div>
                </div>
                <div class="mt-6 flex h-44 flex-auto flex-col">
                    <apx-chart
                        class="flex h-full w-full flex-auto items-center justify-center"
                        [chart]="chartAge.chart"
                        [colors]="chartAge.colors"
                        [labels]="chartAge.labels"
                        [plotOptions]="chartAge.plotOptions"
                        [series]="chartAge.series"
                        [states]="chartAge.states"
                        [tooltip]="chartAge.tooltip"
                    ></apx-chart>
                </div>
                <div class="mt-8">
                    <div class="-my-3 divide-y">
                        @for (
                            dataset of data.age.series;
                            track dataset;
                            let i = $index
                        ) {
                            <div class="grid grid-cols-3 py-3">
                                <div class="flex items-center">
                                    <div
                                        class="h-2 w-2 flex-0 rounded-full"
                                        [style.backgroundColor]="
                                            chartAge.colors[i]
                                        "
                                    ></div>
                                    <div class="ml-3 truncate">
                                        {{ data.age.labels[i] }}
                                    </div>
                                </div>
                                <div class="text-right font-medium">
                                    {{
                                        (data.age.uniqueVisitors * dataset) /
                                            100 | number: '1.0-0'
                                    }}
                                </div>
                                <div class="text-secondary text-right">
                                    {{ dataset }}%
                                </div>
                            </div>
                        }
                    </div>
                </div>
            </div>
            <!-- Language -->
            <div
                class="bg-card flex flex-auto flex-col overflow-hidden rounded-2xl p-6 shadow"
            >
                <div class="flex items-start justify-between">
                    <div
                        class="truncate text-lg font-medium leading-6 tracking-tight"
                    >
                        Language
                    </div>
                    <div class="ml-2">
                        <button
                            class="bg-hover h-6 min-h-6 rounded-full px-2"
                            mat-button
                            [matMenuTriggerFor]="conversionMenu"
                        >
                            <span class="text-secondary text-sm font-medium"
                                >30 days</span
                            >
                        </button>
                        <mat-menu #conversionMenu="matMenu">
                            <button mat-menu-item>30 days</button>
                            <button mat-menu-item>3 months</button>
                            <button mat-menu-item>9 months</button>
                        </mat-menu>
                    </div>
                </div>
                <div class="mt-6 flex h-44 flex-auto flex-col">
                    <apx-chart
                        class="flex h-full w-full flex-auto items-center justify-center"
                        [chart]="chartLanguage.chart"
                        [colors]="chartLanguage.colors"
                        [labels]="chartLanguage.labels"
                        [plotOptions]="chartLanguage.plotOptions"
                        [series]="chartLanguage.series"
                        [states]="chartLanguage.states"
                        [tooltip]="chartLanguage.tooltip"
                    ></apx-chart>
                </div>
                <div class="mt-8">
                    <div class="-my-3 divide-y">
                        @for (
                            dataset of data.language.series;
                            track dataset;
                            let i = $index
                        ) {
                            <div class="grid grid-cols-3 py-3">
                                <div class="flex items-center">
                                    <div
                                        class="h-2 w-2 flex-0 rounded-full"
                                        [style.backgroundColor]="
                                            chartLanguage.colors[i]
                                        "
                                    ></div>
                                    <div class="ml-3 truncate">
                                        {{ data.language.labels[i] }}
                                    </div>
                                </div>
                                <div class="text-right font-medium">
                                    {{
                                        (data.language.uniqueVisitors *
                                            dataset) /
                                            100 | number: '1.0-0'
                                    }}
                                </div>
                                <div class="text-secondary text-right">
                                    {{ dataset }}%
                                </div>
                            </div>
                        }
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
