England Football

Course Availability Individual 

<div class="course-availability-individual" data-behaviour="course-availability-item">
    <header>
        <a href="#" aria-level="expand" aria-expanded="false" data-show="Show Schedule" data-hide="Hide Schedule">
            <p>Show Schedule</p>
        </a>
    </header>
    <div class="course-availability-individual__inner">
        <div class="course-availability-individual__information">
            <div>
                <p>Date</p>
                <h3>Wednesday 12 Feb</h3>
            </div>
            <div class="course-availability-individual__price">£160</div>
        </div>
        <div aria-expanded="false" class="course-availability-individual__content">
            <div class="course-availability-individual__days">
                <h3>Day One</h3>
                <p>
                    <span>Wednesday 12 Sep</span>
                    <span class="middle-seperator">|</span>
                    <span>5:00 PM - 6:00PM</span>
                </p>
            </div>
            <div class="course-availability-individual__days">
                <h3>Day Two</h3>
                <p>
                    <span>Sunday 12 Feb</span>
                    <span class="middle-seperator">|</span>
                    <span>5:00 PM - 6:00PM</span>
                </p>
            </div>
            <div class="course-availability-individual__days">
                <h3>Day Three</h3>
                <p>
                    <span>Saturday 12 Apr</span>
                    <span class="middle-seperator">|</span>
                    <span>5:00 PM - 6:00PM</span>
                </p>
            </div>
        </div>
        <a href="/" class="cta cta--efl  pre-req-global-access" tabindex="0">Sign in to book course</a>

    </div>
    <footer>
        <h4>7 spaces left</h4>
    </footer>
</div>

No notes defined.

{
  "price": 160,
  "fullDate": "Wednesday 12 Feb",
  "spacesLeft": 7,
  "signed-in-online-cta": {
    "copy": "Sign in to book course",
    "modifier": "efl",
    "additionalClass": "pre-req-global-access"
  },
  "days": [
    {
      "title": "Day One",
      "fullDate": "Wednesday 12 Sep",
      "timeRange": "5:00 PM - 6:00PM"
    },
    {
      "title": "Day Two",
      "fullDate": "Sunday 12 Feb",
      "timeRange": "5:00 PM - 6:00PM"
    },
    {
      "title": "Day Three",
      "fullDate": "Saturday 12 Apr",
      "timeRange": "5:00 PM - 6:00PM"
    }
  ],
  "hide-space-left": false
}
 
<div class="course-availability-individual" data-behaviour="course-availability-item" >
    <header>
        <a href="#" aria-level="expand" aria-expanded="false" data-show="Show Schedule" data-hide="Hide Schedule">
            <p>Show Schedule</p>
        </a>
    </header>
    <div class="course-availability-individual__inner" >
        <div class="course-availability-individual__information">
          <div>
            <p>Date</p>
            <h3>{{fullDate}}</h3>
          </div>
          <div class="course-availability-individual__price">£{{price}}</div>
        </div>
        <div aria-expanded="false" class="course-availability-individual__content">
          {{#each days}}
          <div class="course-availability-individual__days">
            <h3>{{title}}</h3>
            <p>
              <span>{{fullDate}}</span>
              <span class="middle-seperator">|</span>
              <span>{{timeRange}}</span>
            </p>
          </div>
          {{/each}}
        </div>
        {{render '@cta' signed-in-online-cta  merge="true"}}
    </div>
    {{#unless hide-space-left}}
    <footer> <h4>{{spacesLeft}} spaces left</h4></footer>
    {{/unless}}
</div>