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

@php

@endphp

<div class="block-doughnut" data-js="doughnut">
    {{-- <div class="block-doughnut__title">
        <div class="p p--strong">Global Gender</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 gender representation among Gucci’s global employees, and Gucci’s global management. Totals may not add up to 100 percent due to rounding. Data in these charts uses the gender categories male and female. Gucci understands, respects and values that gender identity and expression is not binary and is adopting non-binary and gender-expansive language for self-identification.</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">Management by Gender</p>
            </div>
            <div class="block-doughnut__data">
                <div class="block-doughnut__canvas-wrapper">
                    <canvas
                        data-js="doughnut__canvas"
                        data-chart-values='[58.6, 41.4]'
                        data-chart-labels='["Female", "Male"]'
                        data-chart-colors='["#362B6E", "#547095"]'>
                    </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">
                    <div class="block-doughnut__legend-single" data-js="doughnut__legend-sigle">
                        <div class="block-doughnut__legend-single-icon">
                            @include('partials.doughnut-circle-icon', ["color" => '#362B6E'])
                        </div>
                        <div class="block-doughnut__legend-single-content">
                            <div class="block-doughnut__legend-single-label">
                                <span class="p">Female</span>
                            </div>
                            <div class="block-doughnut__legend-single-value">
                                <span class="p p--strong">58,6%</span>
                            </div>
                        </div>
                    </div>

                    <div class="block-doughnut__legend-single" data-js="doughnut__legend-sigle">
                        <div class="block-doughnut__legend-single-icon">
                            @include('partials.doughnut-circle-icon', ["color" => '#547095'])
                        </div>
                        <div class="block-doughnut__legend-single-content">
                            <div class="block-doughnut__legend-single-label">
                                <span class="p">Male</span>
                            </div>
                            <div class="block-doughnut__legend-single-value">
                                <span class="p p--strong">41,4%</span>
                            </div>
                        </div>
                    </div>
                </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">Management by Gender</p>
            </div>
            <div class="block-doughnut__data">
                <div class="block-doughnut__canvas-wrapper">
                    <canvas
                        data-js="doughnut__canvas"
                        data-chart-values='[58.3, 41.7]'
                        data-chart-labels='["Female", "Male"]'
                        data-chart-colors='["#362B6E", "#547095"]'>
                    </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">
                    <div class="block-doughnut__legend-single" data-js="doughnut__legend-sigle">
                        <div class="block-doughnut__legend-single-icon">
                            @include('partials.doughnut-circle-icon', ["color" => '#362B6E'])
                        </div>
                        <div class="block-doughnut__legend-single-content">
                            <div class="block-doughnut__legend-single-label">
                                <span class="p">Female</span>
                            </div>
                            <div class="block-doughnut__legend-single-value">
                                <span class="p p--strong">58,3%</span>
                            </div>
                        </div>
                    </div>

                    <div class="block-doughnut__legend-single" data-js="doughnut__legend-sigle">
                        <div class="block-doughnut__legend-single-icon">
                            @include('partials.doughnut-circle-icon', ["color" => '#547095'])
                        </div>
                        <div class="block-doughnut__legend-single-content">
                            <div class="block-doughnut__legend-single-label">
                                <span class="p">Male</span>
                            </div>
                            <div class="block-doughnut__legend-single-value">
                                <span class="p p--strong">41,7%</span>
                            </div>
                        </div>
                    </div>
                </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">Management by Gender</p>
            </div>
            <div class="block-doughnut__data">
                <div class="block-doughnut__canvas-wrapper">
                    <canvas
                        data-js="doughnut__canvas"
                        data-chart-values='[57.3, 42.7]'
                        data-chart-labels='["Female", "Male"]'
                        data-chart-colors='["#362B6E", "#547095"]'>
                    </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">
                    <div class="block-doughnut__legend-single" data-js="doughnut__legend-sigle">
                        <div class="block-doughnut__legend-single-icon">
                            @include('partials.doughnut-circle-icon', ["color" => '#362B6E'])
                        </div>
                        <div class="block-doughnut__legend-single-content">
                            <div class="block-doughnut__legend-single-label">
                                <span class="p">Female</span>
                            </div>
                            <div class="block-doughnut__legend-single-value">
                                <span class="p p--strong">57,3%</span>
                            </div>
                        </div>
                    </div>

                    <div class="block-doughnut__legend-single" data-js="doughnut__legend-sigle">
                        <div class="block-doughnut__legend-single-icon">
                            @include('partials.doughnut-circle-icon', ["color" => '#547095'])
                        </div>
                        <div class="block-doughnut__legend-single-content">
                            <div class="block-doughnut__legend-single-label">
                                <span class="p">Male</span>
                            </div>
                            <div class="block-doughnut__legend-single-value">
                                <span class="p p--strong">42,7%</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="block-doughnut__caption">
                <div class="caption-2">Data as of June 30, 2020</div>
            </div>
        </div>
    </div>

    <div class="block-doughnut__info">
        <div class="caption-2">
            Management includes corporate positions at manager level and higher and retail positions at department manager level and higher.
        </div>
    </div>

</div>