{{--
  Title: Doughnut-ethnicty
  Description: Doughnut block ethnicty
  Category: formatting
  Icon: columns
  Keywords: doughnut
  Mode: edit
  Align: left
  PostTypes: post
  SupportsAlign: full
  SupportsMode: true
  SupportsMultiple: true
  EnqueueStyle:
  EnqueueScript:
  EnqueueAssets:
--}}

@php
    $colors = ["#362B6E", "#547095", "#80CFCD", "#88EFFA", "#CFCFCF", "#5B4AB4", "#006EFF", "#469C99", "#000000"];
    $labels = ["American Indian or Alaska Native", "Asian", "Black or African American", "Hispanic or Latino", "I do not wish to answer", "Native Hawaiian or Other Pacific Islander", "Two or More Races", "White"];
    $data2020 = ["0.5", "14.8", "14.9", "29.1", "4.4", "1.0", "4.8", "30.4"];
    $data2019 = ["0.5", "15.1", "14.7", "29.1", "4.4", "0.9", "5.1", "30.2"];
    $data2018 = ["0.4", "17.2", "13.9", "29.2", "3.2", "1.0", "4.9", "30.3"];
@endphp

<div class="block-doughnut" data-js="doughnut">
    <div class="block-doughnut__title">
        <div class="p p--strong">US Race & Ethnicity</div>
    </div>
    <div class="block-doughnut__description">
        <div class="p">Annual data provided by the People team at Gucci from 2018 to 2020 with the percentages of diversity representation among Gucci US total employees and Gucci US management: American Indian or Alaska Native, Asian, Black or African American, Do Not Wish to Answer, Hispanic or Latino, Native Hawaiian or Other Pacific Islander, Two or More Races, or White. Totals may not add up to 100 percent due to rounding.</div>
    </div>
    <ul class="block-doughnut__tab" data-js="doughnut__tabs">
        <li class="block-doughnut__tab-item" data-tab="1">
            <span class="p p--strong">2018</span>
        </li>
        <li class="block-doughnut__tab-item" data-tab="2">
            <span class="p p--strong">2019</span>
        </li>
        <li class="block-doughnut__tab-item block-doughnut__tab-item--current" data-tab="3">
            <span class="p p--strong">2020</span>
        </li>
    </ul>

    <div class="block-doughnut__items" data-js="doughnut__items-wrapper">
        <div class="block-doughnut__item" data-js="doughnut__item" data-item="1">
            <div class="block-doughnut__subtitle">
                <p class="p">US Totals by Race & Ethnicity</p>
            </div>
            <div class="block-doughnut__data">
                <div class="block-doughnut__canvas-wrapper">
                    <canvas
                        data-js="doughnut__canvas"
                        data-chart-values="[{{ implode(',', $data2018) }}]"
                        data-chart-labels='["{{ implode('", "', $labels) }}"]'
                        data-chart-colors='["{{ implode('", "', $colors) }}"]'>
                    </canvas>
                    <div class="block-doughnut__canvas-highlighted">
                        <div class="block-doughnut__canvas-highlighted-label">
                            <div class="p" data-js="doughnut-highlighted-label"></div>
                        </div>
                        <div class="block-doughnut__canvas-highlighted-value">
                            <div class="title-3" data-js="doughnut-highlighted-value"></div>
                        </div>
                    </div>
                </div>

                <div class="block-doughnut__legend">
                    @foreach ($labels as $index => $label)
                        <div class="block-doughnut__legend-single" data-js="doughnut__legend-sigle">
                            <div class="block-doughnut__legend-single-icon">
                                @include('partials.doughnut-circle-icon', ["color" => $colors[$index]])
                            </div>
                            <div class="block-doughnut__legend-single-content">
                                <div class="block-doughnut__legend-single-label">
                                    <span class="p">{{ $label }}</span>
                                </div>
                                <div class="block-doughnut__legend-single-value">
                                    <span class="p p--strong">{{ $data2018[$index] }}%</span>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="block-doughnut__caption">
                <div class="caption-2">Data as of December 31, 2018</div>
            </div>
        </div>
        <div class="block-doughnut__item" data-js="doughnut__item" data-item="2">
            <div class="block-doughnut__subtitle">
                <p class="p">US Totals by Race & Ethnicity</p>
            </div>
            <div class="block-doughnut__data">
                <div class="block-doughnut__canvas-wrapper">
                    <canvas
                        data-js="doughnut__canvas"
                        data-chart-values="[{{ implode(',', $data2019) }}]"
                        data-chart-labels='["{{ implode('", "', $labels) }}"]'
                        data-chart-colors='["{{ implode('", "', $colors) }}"]'>
                    </canvas>
                    <div class="block-doughnut__canvas-highlighted">
                        <div class="block-doughnut__canvas-highlighted-label">
                            <div class="p" data-js="doughnut-highlighted-label"></div>
                        </div>
                        <div class="block-doughnut__canvas-highlighted-value">
                            <div class="title-3" data-js="doughnut-highlighted-value"></div>
                        </div>
                    </div>
                </div>

                <div class="block-doughnut__legend">
                    @foreach ($labels as $index => $label)
                        <div class="block-doughnut__legend-single" data-js="doughnut__legend-sigle">
                            <div class="block-doughnut__legend-single-icon">
                                @include('partials.doughnut-circle-icon', ["color" => $colors[$index]])
                            </div>
                            <div class="block-doughnut__legend-single-content">
                                <div class="block-doughnut__legend-single-label">
                                    <span class="p">{{ $label }}</span>
                                </div>
                                <div class="block-doughnut__legend-single-value">
                                    <span class="p p--strong">{{ $data2019[$index] }}%</span>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="block-doughnut__caption">
                <div class="caption-2">Data as of December 31, 2019</div>
            </div>
        </div>
        <div class="block-doughnut__item" data-js="doughnut__item" data-item="3">
            <div class="block-doughnut__subtitle">
                <p class="p">US Totals by Race & Ethnicity</p>
            </div>
            <div class="block-doughnut__data">
                <div class="block-doughnut__canvas-wrapper">
                    <canvas
                        data-js="doughnut__canvas"
                        data-chart-values="[{{ implode(',', $data2020) }}]"
                        data-chart-labels='["{{ implode('", "', $labels) }}"]'
                        data-chart-colors='["{{ implode('", "', $colors) }}"]'>
                    </canvas>
                    <div class="block-doughnut__canvas-highlighted">
                        <div class="block-doughnut__canvas-highlighted-label">
                            <div class="p" data-js="doughnut-highlighted-label"></div>
                        </div>
                        <div class="block-doughnut__canvas-highlighted-value">
                            <div class="title-3" data-js="doughnut-highlighted-value"></div>
                        </div>
                    </div>
                </div>

                <div class="block-doughnut__legend">
                    @foreach ($labels as $index => $label)
                        <div class="block-doughnut__legend-single" data-js="doughnut__legend-sigle">
                            <div class="block-doughnut__legend-single-icon">
                                @include('partials.doughnut-circle-icon', ["color" => $colors[$index]])
                            </div>
                            <div class="block-doughnut__legend-single-content">
                                <div class="block-doughnut__legend-single-label">
                                    <span class="p">{{ $label }}</span>
                                </div>
                                <div class="block-doughnut__legend-single-value">
                                    <span class="p p--strong">{{ $data2020[$index] }}%</span>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="block-doughnut__caption">
                <div class="caption-2">Data as of June 30, 2020</div>
            </div>
        </div>
    </div>

</div>