<?php

$genderTerms = [
  [
    'title' => 'Gender Identity:',
    'content' => [
      'Person’s internal sense of masculinity, femininity, both, or neither, which may or may not be expressed outwardly and may or may not correspond to one’s physical sex characteristics and/or sex assignment at birth'
    ]
  ],
  [
    'title' => 'Gender Assignment:',
    'content' => [
      'A person’s gender designation at birth, correlated with sex assignment'
    ]
  ],
  [
    'title' => 'Gender Roles:',
    'content' => [
      'Expectations imposed on someone based on their gender'
    ]
  ],
  [
    'title' => 'Gender Attribution:',
    'content' => [
      'A term generally referring to gender identities or expressions outside the gender binary'
    ]
  ],
  [
    'title' => 'Gender Expression:',
    'content' => [
      'A person’s external presentation of their gender'
    ]
  ]
];

$genderIdentities = [
  [
    'title' => 'Cisgender',
    'content' => [
      'A term for individuals whose gender identity aligns with their sex assigned at birth'
    ]
  ],
  [
    'title' => 'Gender Non-Conforming (GNC) or Genderqueer',
    'content' => [
      'A person’s gender designation at birth, correlated with sex assignment'
    ]
  ],
  [
    'title' => 'Transgender',
    'content' => [
      'Term used when an individual’s gender identity or expression differs from conventional expectations for their sex assigned at birth'
    ]
  ]
];

?>

<article>

  <div class="flex flex-col bg-white">

    <div class="py-4 px-6">

      <p class="font-bold text-red-500">WHAT IS GENDER IDENTITY?</p>

      <p class="mt-4 font-medium">
        Gender—the culturally specific presentation of masculinity or femininity—involves:
      </p>

    </div>

    <!-- Gender Terms -->
    <div class="flex flex-col bg-white mb-4">

      <div class="py-4 bg-green-600 px-6">
        <p class="font-bold text-white">Financial Support For Students</p>
      </div>

      <div class="flex flex-1 flex-col">
        <div class="flex flex-1 flex-col gap-y-7">

          <div>
            <ul role="list" class="text-blue-900">

              <!-- Differences Loop -->
              <?php

              foreach ($genderTerms as $term) {

              ?>

                <li class="accordion terms-columns">
                  <div class="flex px-2 rounded-md justify-between">
                    <div href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
                      <p class="font-bold"><?php echo $term['title'] ?></p>
                    </div>

                    <button class="accordion-toggle">
                      <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
                      <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
                    </button>

                  </div>
                  <div class="accordion-content space-y-4">

                    <!-- Term Content  -->
                    <div>
                      <ul class="<?php
                                  if (count($term['content']) > 1) {
                                    echo (count($term['content']) > 1) ? 'list-disc' : '';
                                  } ?>">
                        <?php
                        foreach ($term['content'] as $info) { ?>
                          <li class="mb-2">
                            <?php echo $info ?>
                          </li>
                        <?php } ?>
                      </ul>
                    </div>
                  </div>
                </li>


              <?php } ?>

            </ul>
          </div>

        </div>
      </div>

    </div>


    <div class="p-4 w-full bg-cadet-100 shadow-md">
      <p class="mt-2 font-medium">
        In relation to gender, individuals may identify as one or none of the following:
      </p>
    </div>

    <div class="flex flex-col bg-white mb-4">

      <div class="flex flex-1 flex-col">
        <div class="flex flex-1 flex-col gap-y-7">

          <div>
            <ul role="list" class="text-blue-900">

              <!-- Loop -->
              <?php

              foreach ($genderIdentities as $identity) {

              ?>

                <li class="accordion identity-columns">
                  <div class="flex px-2 rounded-md justify-between">
                    <div href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
                      <p class="font-bold"><?php echo $identity['title'] ?></p>
                    </div>

                    <button class="accordion-toggle">
                      <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
                      <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
                    </button>

                  </div>
                  <div class="accordion-content space-y-4">

                    <!-- Identity Content  -->
                    <div>
                      <ul class="<?php
                                  if (count($identity['content']) > 1) {
                                    echo (count($identity['content']) > 1) ? 'list-disc' : '';
                                  } ?>">
                        <?php
                        foreach ($identity['content'] as $info) { ?>
                          <li class="mb-2">
                            <?php echo $info ?>
                          </li>
                        <?php } ?>
                      </ul>
                    </div>
                  </div>
                </li>


              <?php } ?>

            </ul>
          </div>

        </div>
      </div>

    </div>

    <div class="py-8 px-8 bg-cadet-500 text-cadet-900 space-y-4">
      <div class="max-w-7xl mx-auto lg:flex flex-col items-center">
        <i class="bi-quote inline text-cadet-300"></i>
        <p class="inline">Source: di Bartolo, Adriana. 2013. “Is there a difference? The impact of Campus Climate on Sexual Minority and Gender Minority Students’ Levels of Outness.” PhD diss., Claremont Graduate University. ProQuest (LLC ED553093).</p>
        <br><br>
        <a class="font-medium underline" href="https://dgmg81phhvh63.cloudfront.net/content/user-photos/Publications/Archives/Diversity-Democracy/DD_18-2_SP15.pdf">Gender Equity in Higher Education</a>
      </div>
    </div>

    <div class="py-4 px-8 space-y-4 w-full text-white bg-cadet-900 shadow-md">
      <p class="font-bold">What is Sexual Orientation?</p>
      <p>Sexual orientation refers to an enduring pattern of emotional, romantic and/or sexual attractions to men, women or both sexes. Sexual orientation also refers to a person’s sense of identity based on those attractions, related behaviors and membership in a community of others who share those attractions.</p>
      <p>Sexual orientation is usually discussed in terms of three categories:</p>
      <ul class="list-disc px-4 space-y-2">
        <li><strong>Heterosexual: </strong>Having emotional, romantic or sexual attractions to members of the other sex</li>
        <li><strong>Gay/Lesbian: </strong>Having emotional, romantic or sexual attractions to members of one’s own sex)</li>
        <li><strong>Bisexual: </strong>Having emotional, romantic or sexual attractions to both men and women</li>
      </ul>
    </div>

    <div class="py-4 px-6">

      <p>People express their sexual orientation through behaviors with others, including such simple actions as holding hands or kissing. Thus, sexual orientation is closely tied to the intimate personal relationships that meet deeply felt needs for love, attachment and intimacy.</p>


    </div>

    <div class="px-4">

      <ul class="p-4 bg-cadet-300 space-y-4">
        <li>In addition to sexual behaviors, these bonds include nonsexual physical affection between partners, shared goals and values, mutual support, and ongoing commitment.</li>
        <li>Therefore, sexual orientation is not merely a personal characteristic within an individual. Rather, one’s sexual orientation defines the group of people in which one is likely to find the satisfying and fulfilling romantic relationships that are an essential component of personal identity for many people.</li>
      </ul>

      <div class="py-8 px-4 bg-cadet-500 text-cadet-900 space-y-4">
        <div class="max-w-7xl mx-auto lg:flex flex-col items-center">
          <i class="bi-quote inline text-cadet-300"></i>
          <p class="inline">Source: American Psychological Association. (2008). Answers to your questions for a better understanding of sexual orientation & homosexuality.</p>
          <br><br>
          <a class="font-medium underline" href="https://dgmg81phhvh63.cloudfront.net/content/user-photos/Publications/Archives/Diversity-Democracy/DD_18-2_SP15.pdf">Understanding Sexual Orientation and Homosexuality</a>
        </div>
      </div>

    </div>


    <div class="px-4">
      <p class="mt-4">
        Most campuses have student associations or centres that provide services and host events to support lesbian, gay, bisexual, transgender, two-spirit, and queer students. They also work to promote gender equity on campus.
      </p>
      <ul class="list-disc px-8 space-y-2 py-2">
        <li>The centres are a safe and supportive environment for students to meet and talk with peers.</li>
        <li>Counselling services may be provided or referrals made if requested.</li>
        <li>The <a class="font-medium underline" href="htps://www.nativeyouthsexualhealth.com/">Native Youth Sexual Health Network (NYSHN)</a> has resources and information about different aspects of Sexual Health.</li>
        <li><a class="font-medium underline" href="https://www.nativeyouthsexualhealth.com/two-spirit-resource-directory">Two Spirit Resource Directory</a> is published by the Confederacy of Two Spirit Organizations. Links are included for resources in both Canada and the United States.</li>
        <li><a class="font-medium underline" href="https://thelifelinecanada.ca/lbgtq2/">The LifeLine Canada Foundation (TLC)</a> also offers links to LGBTQ resources.</li>
      </ul>
    </div>

    <div class="lg:grid lg:grid-cols-2 space-y-2">
      <div class="px-4 mx-auto">
        <img src=" <?= get_template_directory_uri() ?>/assets/images/bgs/nan-lgbtq.png" alt="NAN LGBTQ">
      </div>
      <div class=px-4 mx-auto">
        <img src=" <?= get_template_directory_uri() ?>/assets/images/bgs/be-yourself.png" alt="Be Yourself">
      </div>
    </div>


  </div>

</article>