<?php

$rentProsCons = [
  [
    'title' => 'Apartment',
    'pros' => [
      'Secure and private entry to the building and unit',
      'Typically fewer tenants per unit than are found in a house',
      'Greater chance of an onsite, and more responsive, landlord or property manager'
    ],
    'cons' => [
      'Shared space with all other residents, especially laundry rooms, mail areas, and lounges',
      'Buildings with many units have a greater potential for noise issues and hazards',
      'Apartment hallways, trash rooms, and entryways may be neglected or abused'
    ]
  ],
  [
    'title' => 'House',
    'pros' => [
      'Typically more spacious than an apartment holding the same number of tenants',
      'Much better way to live with a large group of people, which is one of the cheapest ways to rent',
      'Better chance pets are permitted, especially if the house comes with a yard',
      'More likely to have private amenities, such as a washer and dryer'
    ],
    'cons' => [
      'Oftentimes homes are less secure than apartments, especially if the property is isolated',
      'Homes may require more maintenance, which can mean more reliance on the landlord',
      'The fewer people you live with, or the nicer the house, the pricier the rent will be. Total rent for a house will tend to be more than the apartment equivalent',
      'Shared bathroom, kitchen, and living areas can mean less privacy overall'
    ]
  ]
];

?>


<article>

  <div class="px-4">
    <p class="font-medium">
      Living off-campus can be a great choice when attending post-secondary school. Remember to do your research and ask questions!
    </p>
    <p class="p-4 text-red-500 font-bold">Renting can be costly, and you will also need to think about any one-time costs:</p>
    <ul class="list-disc px-8 space-y-2 py-2">
      <li>First and Last Month’s Rent</li>
      <li>Security Deposit</li>
      <li>Pet Deposits</li>
    </ul>
  </div>

  <div class="px-4 mt-4 space-y-2 py-4 bg-cadet-300">

    <p class="font-bold">Remember, monthly costs include:</p>

    <ul class="space-y-2">
      <li>- Rent</li>
      <li>- Utilities</li>
      <li>- Miscellaneous Services Offered Onsite (Internet, Phone, Cable, etc.)</li>
    </ul>

  </div>

  <div class="px-4 space-y-2 py-4">

    <p class="">Some landlords will include one or more utilities in the rent. Any utility not included with the rent will need to be paid separately.</p>

    <ul class="list-disc px-8 space-y-2">
      <li>Water: cities charge for water being sent to the unit.</li>
      <li>Electricity: this can be called Hydro One or Synergy North.</li>
      <li>Heating: some units use natural gas from Enbridge to heat the property.</li>
    </ul>

  </div>

  <div class="p-4 space-y-2 bg-cadet-900 text-white ">
    <p class="font-bold">What rental period is best for you?</p>
    <p>
      In formal leasing agreements, there are different rental periods.
    </p>
    <ul class="list-disc px-8 space-y-2 py-2">
      <li>One-year Lease (the most common)</li>
      <li>Eight-month Lease (slightly difficult to find)</li>
      <li>Month-to-month Lease (more difficult to find)</li>
    </ul>
  </div>

  <div class="bg-white">
    <h2 class="text-l p-4 text-red-500 font-bold">What kind of property should you rent?</h2>

    <!-- Property Rental Pros and Cons -->
    <div class="flex flex-col bg-white mb-4">

      <div class="flex flex-1 flex-col">
        <div class="flex flex-1 flex-col">

          <?php

          foreach ($rentProsCons as $comparison) {

          ?>

            <div class="py-4 bg-red-600 px-6">
              <p class="font-bold text-white"><?php echo $comparison['title'] . ' Pros & Cons' ?></p>
            </div>

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

                <!-- Pros Loop -->
                <li class="accordion comparisons-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>Pros</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">

                    <ul class="space-y-2 list-disc px-4">

                      <?php foreach ($rentProsCons[0]['pros'] as $pro) { ?>

                        <li><?= $pro ?></li>

                      <?php } ?>

                    </ul>

                  </div>
                </li>

                <!-- Cons Loop -->
                <li class="accordion comparisons-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>Cons</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">

                    <ul class="space-y-2 list-disc px-4">

                      <?php foreach ($rentProsCons[1]['cons'] as $con) { ?>

                        <li><?= $con ?></li>

                      <?php } ?>

                    </ul>

                  </div>
                </li>

              </ul>
            </div>
          <?php } ?>

        </div>
      </div>

    </div>


  </div>

  <div class="py-4 space-y-4 px-4 lg:w-1/2  mx-auto">
    <img class="w-3/5 lg:w-1/2 mx-auto" src=" <?= get_template_directory_uri() ?>/assets/images/bgs/pros-and-cons-list.png" alt="Online Learning">
  </div>

  <div class="max-w-7xl mx-auto lg:flex flex-col items-center">
    <div class="italic py-8 px-8 bg-cadet-500 text-cadet-900 space-y-4">
      <i class="bi-quote text-7xl inline text-cadet-300"></i>
      <p class="font-medium inline text-l">Overall, establishing safe and supportive allies, accessing resources, and participating in cultural events helped me the most when transitioning from high school to post-secondary and ensured my success when completing my program. I encourage all Indigenous students to access culturally safe supports and settings when moving onto post-secondary because it can make an immense difference in your overall well-being and success!”</p>
      <p class="mt-4 mb-2 font-medium">Mackenzie Young, Mattagami First Nation</p>
      <p>Northern College Graduate – Social Services Program</p>
    </div>
  </div>


</article>