Displaying individual items on their own page using perch_custom_content

It's been a while since I used Perch, and I'm much more of a designer than a developer so it's possible the mistake I'm making is really obvious but nevertheless it's something I'm blind to at the moment.

I should note I'm on the most recent Perch 2, as the site uses the old PayPal Shop app (another thing that will be updated to allow us to move to Perch 3), the events are more pressing, hence my focus.

I'm updating a website I created a while ago for a client, it previously used the old events app, but this is no longer doing what we need it to do so I'm attempting to build events using perch_content_create. I have successfully registered the content type on my /events/index.php and have it outputting a list of events on the page using perch_content_custom.

When the events are listed I have set it to create a link on the event title in order to give each event their own page where more information can be displayed. This is where I am coming unstuck as I cannot get these pages to load, I always get a 404. What's annoying me most is that I have done it on other sites and don't seem to have changed my method. Hoping someone can help me.

This is my content_create in /events/index.php

<?php
    perch_content_create('Events', array(
                    'template' => 'event.html',
                    'multiple' => true,
                    'edit-mode' => 'listdetail',
                    'sort' => 'eventStart',
                ));
 ?>

My event.html template looks like this:

<article>

  <h2><perch:content id="eventName" type="text" label="Event Name" required="true" title="true" /></h2>

  <perch:categories id="eventCategory" label="Event Category" set="events" required="true" display-as="checkboxes" />

  <div class="event-times">
    <p><perch:content id="eventStart" type="date" time="true" label="Start Date/Time" format="d F Y H:i" required="true" /></p>
    <p><perch:content id="eventFinish" type="date" time="true" label="Finish Date/Time" format="d F Y H:i" /></p>
  </div>

  <div class="event-description">
    <perch:content id="eventDescription" type="textarea" label="Event Description" markdown="true" editor="markitup" />
  </div>

  <perch:if exists="image">
      <img src="<perch:content id="eventImage" type="image" label="Event Image" width="1400" crop="true" />" alt="<perch:content id="eventName" />" />
  </perch:if>

  <perch:if exists="Files">
      <h6>Event Documents</h6>
      <perch:repeater id="eventFile" label="Files" max="5">
      <perch:before><ul></perch:before>
        <li>
          <a href="<perch:content id="eventFile" type="file" label="File" />"><perch:events type="text" id="fileTitle" label="File Title" title="true" /></a>
        </li>
      <perch:after></ul></perch:after>
      </perch:repeater>
  </perch:if>

  <perch:content id="eventSlug" for="eventName" type="slug" suppress="true" />

</article>

This is my event listing

<?php
perch_content_custom('Events', array(
'template' => 'event_listing.html',
));
 ?>

This is my event_listing.html template

<perch:before>
<ul>
</perch:before>

    <li class="event">
      <h5><a href="/events/<perch:content id="eventSlug" for="title" type="slug"" />"><perch:content id="eventName" /></a></h5>
      <div class="event-times">
        <p><perch:content id="eventStart" /></p>
        <p><perch:content id="eventFinish" /></p>
      </div>
    </li>

<perch:after>
</ul>
</perch:after>

And this is my event.php that lives at /events/event.php

<?php include('../perch/runtime.php'); ?>
<?php perch_layout('events.header'); ?>

<?php perch_content_custom('Events', array(
        'page' => 'events/index.php',
        'template' => 'event.html',
        'filter' => 'eventSlug',
        'match' => 'eq',
        'value' => perch_get('s'),
        'count' => 1,
      ));
      ?>


<?php perch_layout('global.footer'); ?>

<?php perch_get_javascript(); ?>
</body>
</html>