{{--
  Template Name: Impact Report 2022 People Pillar 1
--}}

@php

  $data_articles = array(
    (object) [
      'cover' => '/wp-content/themes/equilibrium/resources/assets/impactreport-2022/assets/images/People/People_Pillar_1_1.jpg',
      'coverMobile' => '/wp-content/themes/equilibrium/resources/assets/impactreport-2022/assets/images/People/mobile/People_Pillar_1_1-mob.jpg',
      'title' => 'Diversity, Equity and Inclusion at Gucci',
      'url' => 'https://equilibrium.gucci.com/diversity-equity-and-inclusion-at-gucci/'
    ],
  );

@endphp

@extends('layouts.app')
@section('content')
<div class="container__impactreport2022">
  <div class="impactreport2022-wrapper pillar">
    <div class="pillar" id="people-impactreport2022">
      <h1 class="impactreport-2022-main-title-block">
        EMPOWERING EQUITY,<br>
        ENHANCING COMMUNITY
      </h1>
      <div class="impactreport-2022-text-block">
        <p>We foster diversity, inclusion and equity across our global Gucci Community. What makes us all uniquely individual, makes us thrive and excel.</p>
      </div>
      <h2 class="impactreport-2022-small-title-block title-sticky">
        2022 SPOTLIGHT
      </h2>
      <div class="impactreport-2022-text-block">
        <img src="/wp-content/themes/equilibrium/resources/assets/impactreport-2022/assets/icons/spotlight-people.svg" alt="">
       <p>
       As the first and only luxury brand, Gucci was named one of the 2022 Best Places to Work For Disability Inclusion by the Disability Equality Index.
       </p>
      </div>
      <h2 class="impactreport-2022-small-title-block title-sticky">
        2022 IN NUMBERS 
      </h2>
      <h2 class="impactreport-2022-subtitle-block">
        GLOBAL GENDER DIVERSITY
      </h2>
      <div class="pillar-double-section">
        <div class="pillar-double-section__item">
          <h3 class="impactreport-2022-subtitle-block">
            OVERALL
          </h3>
          <div class="vertical-histogram relative">
            <div id="screen-reader-1" aria-hidden="true"></div>
            <canvas id="overall-gender-graph"></canvas>
            <div class="axis"></div>
          </div>
        </div>
        <div class="pillar-double-section__item">
          <h3 class="impactreport-2022-subtitle-block impactreport2022-border-top">
            MANAGEMENT
          </h3>
          <div class="vertical-histogram relative">
            <div id="screen-reader-2" aria-hidden="true"></div>
            <canvas id="management-gender-graph"></canvas>
            <div class="axis"></div>
          </div>
        </div>
      </div>
      <h2 class="impactreport-2022-subtitle-block border-top">
        U.S. RACE AND ETHNICITY
      </h2>
      <div class="pillar-double-section">
        <div class="pillar-double-section__item">
          <h3 class="impactreport-2022-subtitle-block">
            OVERALL
          </h3>
          <div class="vertical-histogram big">
            <div id="screen-reader-3" aria-hidden="true"></div>
            <canvas id="overall-race-graph"></canvas>
          </div>
          <div class="vertical-histogram big no-desk">
            <div id="screen-reader-3-mobile" aria-hidden="true"></div>
            <canvas id="overall-race-graph-mobile" class="impactreport2022-border-top"></canvas>
          </div>
        </div>
        <div class="pillar-double-section__item">
          <h3 class="impactreport-2022-subtitle-block impactreport2022-border-top">
            MANAGEMENT
          </h3>
          <div class="vertical-histogram big">
            <div id="screen-reader-4" aria-hidden="true"></div>
            <canvas id="management-race-graph"></canvas>
          </div>
          <div class="vertical-histogram big no-desk border-bottom">
            <div id="screen-reader-4-mobile" aria-hidden="true"></div>
            <canvas id="management-race-graph-mobile" class="impactreport2022-border-top"></canvas>
          </div>
        </div>
      </div>
      @include('partials.pillar-post-related', [
        'data' => $data_articles,
        'category' => 'people'
      ])
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
{{-- <script src="https://cdn.jsdelivr.net/npm/chart2music"></script> --}}
<script src="/wp-content/themes/equilibrium/resources/views/impactreport-2022/lib/chart2music.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<script src="/wp-content/themes/equilibrium/resources/views/impactreport-2022/vertical-histogram.js"></script>   

@endsection