<link rel="stylesheet" type="text/css"
  href="https://ov-contractor-assets.s3.us-west-1.amazonaws.com/stylesheets/YEH/EventsDashboard/eventsDashboardStylesheet.css">
<!-- *************************** BANNER SECTION START *************************** -->
<div class=" events-banner-container">
  <div class="events-banner-content">
    <span class="events-banner-title">
      Events
    </span>
  </div>
</div>
<!-- *************************** BANNER SECTION END *************************** -->
<div id="ev-main">
  <div id="ev-main-content">
    <!-- *************************** FILTER SECTION START *************************** -->
    <div class="ev-filtersContainer events-search-main">
      <!-- *************************** CREATE EVENT SECTION START *************************** -->
      <div class="createEventContainer" style="display:none">
        <a class="createEventButton" href="/display/EVE/Create+Event">Create Event</a>
      </div>
      <!-- *************************** CREATE EVENT SECTION END *************************** -->
      <label class="categoriesInputLabel">Filter By</label>
      <div class="filterAndSearchContainer">
        <!-- Filter : Categories Input -->

        <div class="filterAndSearchContainer_left">
          <div class="filterContainer">
            <input type='text' id='categories-input' class="categoriesInput" autocomplete="off" placeholder='All'
              onkeyup='handleCategoriesSearch(this, event)' />
            <img id="categories-input-icon" class="categories-input-icon" loading="lazy"
              src="https://ov-contractor-assets.s3.us-west-1.amazonaws.com/images/YEH/CategoriesDropDownArrow/keyboard_arrow_left.png" />
            <ul id="categoriesFilter"></ul>
          </div>

          <!-- Filter : Date Input -->
          <div class="filterContainer">
            <div class="dateFilterContainer">
              <p class="dateInputContainer">
                <input type="text" placeholder="Start Date" class="categoriesInput" id="startdate">
                <img class="dateInputCalenderIcon" id="calStartIcon"
                  src="https://ov-contractor-assets.s3.us-west-1.amazonaws.com/images/YEH/CalendarIcon/Frame.png"
                  loading="lazy" />
                <img class="dateInputCalenderClearStartIcon" style="display: none;"
                  src="https://entrepreneurshipspace.com/download/attachments/46334146/closeicon.png?api=v2"
                  loading="lazy" />
              </p>
              <span>
                <img
                  src="https://ov-contractor-assets.s3.us-west-1.amazonaws.com/images/YEH/DateArrows/akar-icons%3Aarrow-shuffle.png"
                  alt="DateArrows" class="dateFilter_arrows_img" width="15" height="15" loading="lazy" />
              </span>
              <p class="dateInputContainer">
                <input type="text" placeholder="End Date" class="categoriesInput" id="enddate">
                <img class="dateInputCalenderIcon" id="calEndIcon"
                  src="https://ov-contractor-assets.s3.us-west-1.amazonaws.com/images/YEH/CalendarIcon/Frame.png"
                  loading="lazy" />
                <img class="dateInputCalenderClearEndIcon" style="display: none;"
                  src="https://entrepreneurshipspace.com/download/attachments/46334146/closeicon.png?api=v2"
                  loading="lazy" />
              </p>
            </div>
          </div>
        </div>

        <!-- Filter : Search Input -->
        <div class="filterContainer" id="events-search-container">
          <input id="categories-events-searchbar" class="categoriesInput" type="text" autocomplete="off"
            placeholder="Event Name" />
          <img id="categories-input-search-icon" class="categories-input-icon_search" loading="lazy"
            src="/download/attachments/46334146/searchicon.png?api=v2" />
          <div class="resetFilterContainer" style="display: none;">
            <a id="resetFilter">Clear All Filters</a>
          </div>
        </div>
      </div>
      <!-- *************************** FILTER SECTION END *************************** -->

    </div>
    <div class="event-card-content" id="event-searched-content" style="display:none">
      <span class="event-card-section-title">Search Results</span>
      <div class="event-card-section" id="searched-events">
      </div>
    </div>

    <div class="event-card-content" id="event-card-content">
      <div class="event-card-content-header">
        <span class="event-card-section-title">Upcoming Events and Past Events</span>
        <span class="event-card-section-arrow-container">
          <button class="event-prev-btn" id="event-allevent-prev" onclick='changePage("prev","all-events")'>
            <img class='event-card-section-arrow_icon' loading="lazy"
              src="https://ov-contractor-assets.s3.us-west-1.amazonaws.com/images/YEH/eventCardPageArrows/keyboard_arrow_left.webp">
          </button>
          <button class="event-next-btn" id="event-allevent-next" onclick='changePage("next","all-events")'>
            <img class='event-card-section-arrow_icon' loading="lazy"
              src="https://ov-contractor-assets.s3.us-west-1.amazonaws.com/images/YEH/eventCardPageArrows/keyboard_arrow_right.webp">
        </span>
      </div>
      <div class="event-card-section" id="all-events">
      </div>
    </div>






    <div class="event-card-content" id="event-card-content">
      <div class="event-card-content-header">
        <span class="event-card-section-title">My Events</span>
        <span class="event-card-section-arrow-container">
          <button class="event-prev-btn" id="event-my-events-container-prev"
            onclick='changePage("prev","my-events-container")'>
            <img class='event-card-section-arrow_icon' loading="lazy"
              src="https://ov-contractor-assets.s3.us-west-1.amazonaws.com/images/YEH/eventCardPageArrows/keyboard_arrow_left.webp">
          </button>
          <button class="event-next-btn" id="event-my-events-container-next"
            onclick='changePage("next","my-events-container")'>
            <img class='event-card-section-arrow_icon' loading="lazy"
              src="https://ov-contractor-assets.s3.us-west-1.amazonaws.com/images/YEH/eventCardPageArrows/keyboard_arrow_right.webp">
        </span>
      </div>
      <div class="event-card-section" id="my-events-container">
      </div>
    </div>

    <div class='event-card-content' id='event-card-section-unpublished' style="display:none">
      <div class="event-card-content-header">
        <span class="event-card-section-title">Unpublished Events</span>
        <span class="event-card-section-arrow-container">
          <button class="event-prev-btn" id="event-unpublished-events-prev"
            onclick='changePage("prev","unpublished-events")'>
            <img class='event-card-section-arrow_icon' loading="lazy"
              src="https://ov-contractor-assets.s3.us-west-1.amazonaws.com/images/YEH/eventCardPageArrows/keyboard_arrow_left.webp">
          </button>
          <button class="event-next-btn" id="event-my-events-container-next"
            onclick='changePage("next","unpublished-events")'>
            <img class='event-card-section-arrow_icon' loading="lazy"
              src="https://ov-contractor-assets.s3.us-west-1.amazonaws.com/images/YEH/eventCardPageArrows/keyboard_arrow_right.webp">
        </span>
      </div>
      <div class="event-card-section" id="unpublished-events">
      </div>
    </div>

  </div>
</div>
<script
  src="https://ov-contractor-assets.s3.us-west-1.amazonaws.com/js/YEH/EventsDashboard/yeh_eventsDashboard.js"></script>