<?php

$onecaLinks = [
  [
    'title' => 'Being Prepared',
    'content' => [
      '<a href="https://www.youtube.com/watch?v=nIPEwMHU3U0">FNMI Transitions - Remote to Urban - 1 Being Prepared</a>'
    ]
  ],
  [
    'title' => 'The Change and the Challenge',
    'content' => [
      '<a href="https://www.youtube.com/watch?v=A806SJpi0aw&t=51s">FNMI Transitions - Remote to Urban - 2 The Change & The Challenge</a>'
    ]
  ],
  [
    'title' => 'The Helping Hand Counsellors',
    'content' => [
      '<a href="https://www.youtube.com/watch?v=bMiToo6bx1E">FNMI Transitions - Remote to Urban - 3 Being Prepared</a>'
    ]
  ],
  [
    'title' => 'The Helping Hand Student',
    'content' => [
      '<a href="https://www.youtube.com/watch?v=ICzNDVQ0pUQ&t=138s">FNMI Transitions - Remote to Urban - 4 The Helping Hand Student</a>'
    ]
  ],
  [
    'title' => 'The Importance of Education',
    'content' => [
      '<a href="https://www.youtube.com/watch?v=2v5-7xb_KTg">FNMI Transitions - Remote to Urban - 5 The Importance of Education</a>'
    ]
  ],
  [
    'title' => 'Visit the ONECA transitions website',
    'content' => [
      '<a href="https://oneca.com/transitions/remotetourban/">The ONECA transitions website</a>'
    ]
  ]
];

?>

<article>

  <div class="bg-white">
    <h2 class="text-l p-4 text-red-500 font-bold">ONECA has many videos about post-secondary education.</h2>
    <p class="px-4 mb-4">These videos include students and instructors talking about learning and living as a college or university student.</p>

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

      <div class="py-4 bg-green-600 px-6">
        <p class="font-bold text-white">ONECA Links</p>
      </div>

      <!-- ONECA Links Loop -->
      <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">

              <?php

              foreach ($onecaLinks as $onecaLink) {

              ?>

                <li class="accordion oneca-links-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><?php echo $onecaLink['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">

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


              <?php } ?>

            </ul>
          </div>

        </div>
      </div>

    </div>

  </div>


</article>