Course search page

<div class="ds-block">
    <h1 style="text-align: center;">Courses and degrees</h1>
</div>

<div class="ds-block">

    <div class="ds-shadow-box">

        <fieldset class="ds-control-group ds-control-group--toggle-tokens ds-control-group--inline">
            <legend class="ds-legend">
                I am:
            </legend>

            <div class="ds-form-group ds-form-group--radio-toggle">
                <input class="ds-input-radio ds-input-radio--toggle" type="radio" name="student" id="dom-toggle"
                    value="dom" checked>
                <label class="ds-label" for="dom-toggle">a domestic student</label>
            </div>

            <div class="ds-form-group ds-form-group--radio-toggle">
                <input class="ds-input-radio ds-input-radio--toggle" type="radio" name="student" id="int-toggle"
                    value="int">
                <label class="ds-label" for="int-toggle">an international student</label>
            </div>

        </fieldset>

        <div class="ds-block">

            <fieldset class="ds-control-group ds-control-group--toggle-tokens ds-control-group--inline" style="margin-top: .5rem; margin-bottom: 1.5rem;">
                <legend class="ds-legend">
                    Study level:
                </legend>

                <div class="ds-form-group">
                    <input class="ds-input-checkbox ds-input-checkbox--toggle" type="checkbox" id="checkbox-1" checked>
                    <label class="ds-label" for="checkbox-1">
                        Undergraduate
                    </label>
                </div>

                <div class="ds-form-group">
                    <input class="ds-input-checkbox ds-input-checkbox--toggle" type="checkbox" id="checkbox-2">
                    <label class="ds-label" for="checkbox-2">
                        Postgraduate
                    </label>
                </div>

                <div class="ds-form-group">
                    <input class="ds-input-checkbox ds-input-checkbox--toggle" type="checkbox" id="checkbox-3">
                    <label class="ds-label" for="checkbox-3">
                        Research
                    </label>
                </div>

                <div class="ds-form-group">
                    <input class="ds-input-checkbox ds-input-checkbox--toggle" type="checkbox" id="checkbox-4">
                    <label class="ds-label" for="checkbox-4">
                        Short courses
                    </label>
                </div>
            </fieldset>

        </div>

        <form class="ds-form ds-form--full-width" id="course-search" action="">
            <div class="ds-form-group">
                <label class="ds-label h2 sr-only" for="query_courses">Find your course</label>
                <div class="ds-input-group">
                    <div class="ds-input-group__prepend">
                        <div class="ds-input-group__text ds-input-group__text--bg-white query-tag-message"
                           ><span>You searched for:&ThickSpace;</span><span id="query-tag-container"></span></div>
                    </div>
                    <input class="ds-text-input" type="search" id="query_courses"
                        placeholder="Search for a course by keyword, course &hellip;" autocomplete="off">
                    <button class="ds-btn-primary ds-icon-search ds-icon--before ds-btn--icon-only-mobile" type="submit"
                        id="course-search-submit">Search</button>
                </div>
                <div id="course-autosuggest" 
        class="ds-results-list">
                <p class="ds-results-list__search-keywords ds-icon-search ds-icon--before">&ThickSpace;search keywords: "<span></span>"</p>
                <p class="ds-results-list__suggested-keywords">Suggested keywords:</p>
                <ul class="autosuggest-results">
                    <!-- <li class="ds-results-list-item">Business</li>
                    <li class="ds-results-list-item">Management</li>
                    <li class="ds-results-list-item">Business and law</li>
                    <li class="ds-results-list-item">Management</li>
                    <li class="ds-results-list-item">Marketing</li> -->
                </ul>
        </div>
                <div id="related-terms-container">
                    <p>Related to your search:</p>
                    <button class="ds-tag ds-tag--add" data-search-type="related-term">Related term 1</button>
                    <button class="ds-tag ds-tag--add" data-search-type="related-term">Related term 2</button>
                    <button class="ds-tag ds-tag--add" data-search-type="related-term">Related term 3</button>
                </div>
            </div>
        </form>

        {% include sample-component.html snippet="ltu-components/src/form/snippets/filter-group/filter-group.html" %}

    </div>

</div>

<div class="ds-block">

    <p class="ds--full-width ds--overflowXScroll--mobile">
        <!-- <b>Filtered by:</b> -->
        <span id="filter-tags">
            <!-- <button class="ds-tag ds-tag--green" title="remove filter">Health</button> -->
        </span>
    </p>

    <fieldset class="ds-control-group  ds-control-group--inline">
        <legend class="ds-legend ">
            Sort by:
        </legend>

        <div class="ds-form-group">
            <input class="ds-input-radio" type="radio" name="sort-relevance" id="sort-relevance" checked>
            <label class="ds-label" for="sort-relevance">Relevance</label>
        </div>

        <div class="ds-form-group">
            <input class="ds-input-radio" type="radio" name="sort-relevance" id="sort-a-z">
            <label class="ds-label" for="sort-a-z">A&VeryThinSpace;-&VeryThinSpace;Z</label>
        </div>

        <div class="ds-form-group">
            <input class="ds-input-radio" type="radio" name="sort-relevance" id="sort-popular">
            <label class="ds-label" for="sort-popular">Popular</label>
        </div>

    </fieldset>

    <p><b>Number of results:</b> <span id="course-search-results-count">418</span></p>

    <div id="course-search-results">



        <div class="ds-card-set--2max">

            <div href="http://example.org" class="ds-card">
                <header class="ds-card__header">

                    <span class="ds-card__tag-course">Popular course</span>
                </header>

                <div class="ds-card__body">
                    <h3 class="ds-card__heading">Bachelor of Business Analytics</h3>
                    <p class="ds-card__subheading">Undergraduate course</p>

                    <div class="ds-tabs">
                        <div class="ds-tabs-nav" role="tablist">
                            <button class="ds-tabs-nav__tab" role="tab" aria-selected="true" aria-controls="tab1"
                                id="tab1trigger">Melbourne</button>

                            <button class="ds-tabs-nav__tab" role="tab" aria-selected="false" aria-controls="tab2"
                                id="tab2trigger" tabindex="-1">Sydney</button>
                        </div>

                        <div class="ds-tabs-content">
                            <div id="tab1" class="ds-tab-content__body" role="tabpanel" aria-labelledby="tab1trigger">
                                <div class="ds-table-wrapper">
                                    <table class="ds-table ds-table--unstyled">
                                        <tbody>
                                            <tr>
                                                <th>ATAR:</th>
                                                <td>65.40</td>
                                            </tr>
                                            <tr>
                                                <th>Start dates:</th>
                                                <td>Multiple start dates at various locations</td>
                                            </tr>
                                            <tr>
                                                <th>Duration:</th>
                                                <td>3 years full-time or part-time equivalent</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <div id="tab2" class="ds-tab-content__body" role="tabpanel" aria-labelledby="tab2trigger"
                                hidden>
                                <div class="ds-table-wrapper">
                                    <table class="ds-table ds-table--unstyled">
                                        <tbody>
                                            <tr>
                                                <th>ATAR:</th>
                                                <td>75.40 </td>
                                            </tr>
                                            <tr>
                                                <th>Start dates:</th>
                                                <td>Multiple start dates at various locations</td>
                                            </tr>
                                            <tr>
                                                <th>Duration:</th>
                                                <td>3 years full-time or part-time equivalent</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="ds-card__actions"><a class="ds-btn ds-btn-primary ds-icon-chevron-right" href="#">View course</a>
                            <button data-saved="false" class="ds-btn ds-icon-heart ds-icon--before ds-card__save--course-search" data-course="Bachelor of Business Analytics">Save and
                                compare</button>
                            <div id="save-course-note" class="interaction-note"><button class="close-note" onclick="closeNote(this); return false;" data-ltu-cm-bp="ClosePopUpClicked"></button><p class="zero-margin">Bachelor of Business Analytics added to "<a href="/courses/my-saved-courses?favourites=836928,836880" data-ltu-cm-bp="ViewSavedCoursesPopUpClicked">My saved courses</a>". Now you can <a class="compare-course-link" href="/courses/my-saved-courses/compare-courses?type=UG&amp;favourites=836928,836880">Compare them</a>.</p></div> 
                        </div>

                    </div>
                </div>
            </div>

            <div href="http://example.org" class="ds-card">
                <header class="ds-card__header">

                    <span class="ds-card__tag-course">New course</span>
                </header>

                <div class="ds-card__body">
                    <h3 class="ds-card__heading">Bachelor of Arts</h3>
                    <p class="ds-card__subheading">Undergraduate course</p>

                    <div class="ds-tabs">
                        <div class="ds-tabs-nav" role="tablist">
                            <button class="ds-tabs-nav__tab" role="tab" aria-selected="true" aria-controls="tab3"
                                id="tab3trigger">Melbourne</button>

                            <button class="ds-tabs-nav__tab" role="tab" aria-selected="false" aria-controls="tab4"
                                id="tab4trigger" tabindex="-1">Albury-Wodonga</button>

                            <button class="ds-tabs-nav__tab" role="tab" aria-selected="false" aria-controls="tab5"
                                id="tab5trigger" tabindex="-1">Bendigo</button>
                        </div>

                        <div class="ds-tabs-content">
                            <div id="tab3" class="ds-tab-content__body" role="tabpanel" aria-labelledby="tab3trigger">
                                <div class="ds-table-wrapper">
                                    <table class="ds-table ds-table--unstyled">
                                        <tbody>
                                            <tr>
                                                <th>ATAR:</th>
                                                <td>70.55</td>
                                            </tr>
                                            <tr>
                                                <th>Start dates:</th>
                                                <td>Semester 1 (March), Semester 2 (July), Semester 1 (March), Semester
                                                    2 (July)</td>
                                            </tr>
                                            <tr>
                                                <th>Duration:</th>
                                                <td>3 years full-time or part-time equivalent</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <div id="tab4" class="ds-tab-content__body" role="tabpanel" aria-labelledby="tab4trigger"
                                hidden>
                                <div class="ds-table-wrapper">
                                    <table class="ds-table ds-table--unstyled">
                                        <tbody>
                                            <tr>
                                                <th>ATAR:</th>
                                                <td>75.40 </td>
                                            </tr>
                                            <tr>
                                                <th>Start dates:</th>
                                                <td>Multiple start dates at various locations</td>
                                            </tr>
                                            <tr>
                                                <th>Duration:</th>
                                                <td>3 years full-time or part-time equivalent</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <div id="tab5" class="ds-tab-content__body" role="tabpanel" aria-labelledby="tab5trigger"
                                hidden>
                                <div class="ds-table-wrapper">
                                    <table class="ds-table ds-table--unstyled">
                                        <tbody>
                                            <tr>
                                                <th>ATAR:</th>
                                                <td>65.40 </td>
                                            </tr>
                                            <tr>
                                                <th>Start dates:</th>
                                                <td>Multiple start dates at various locations</td>
                                            </tr>
                                            <tr>
                                                <th>Duration:</th>
                                                <td>3 years full-time or part-time equivalent</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="ds-card__actions"><a class="ds-btn ds-btn-primary ds-icon-chevron-right" href="#">View course</a>
                            <button data-saved="false" class="ds-btn ds-icon-heart ds-icon--before ds-card__save--course-search" data-course="Bachelor of Arts">Save and
                                compare</button>
                            <div id="save-course-note" class="interaction-note"><button class="close-note" onclick="closeNote(this); return false;" data-ltu-cm-bp="ClosePopUpClicked"></button><p class="zero-margin">Bachelor of Arts added to "<a href="/courses/my-saved-courses?favourites=836928,836880" data-ltu-cm-bp="ViewSavedCoursesPopUpClicked">My saved courses</a>". Now you can <a class="compare-course-link" href="/courses/my-saved-courses/compare-courses?type=UG&amp;favourites=836928,836880">Compare them</a>.</p></div>    
                        </div>


                    </div>
                </div>
            </div>

            <div href="http://example.org" class="ds-card">
                <header class="ds-card__header">

                    <span class="ds-card__tag-course">Double degree</span>
                </header>

                <div class="ds-card__body">
                    <h3 class="ds-card__heading">Master of Cybersecurity (Computer Science)</h3>
                    <p class="ds-card__subheading">Postgraduate course</p>

                    <div class="ds-tabs">
                        <div class="ds-tabs-nav" role="tablist">
                            <button class="ds-tabs-nav__tab" role="tab" aria-selected="true" aria-controls="tab7"
                                id="tab7trigger">Melbourne</button>
                        </div>

                        <div class="ds-tabs-content">
                            <div id="tab7" class="ds-tab-content__body" role="tabpanel" aria-labelledby="tab7trigger">
                                <div class="ds-table-wrapper">
                                    <table class="ds-table ds-table--unstyled">
                                        <tbody>
                                            <tr>
                                                <th>ATAR:</th>
                                                <td>70.55</td>
                                            </tr>
                                            <tr>
                                                <th>Start dates:</th>
                                                <td>Any time (2021)</td>
                                            </tr>
                                            <tr>
                                                <th>Duration:</th>
                                                <td>3 years full-time or part-time equivalent</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                        </div>

                        <div class="ds-card__actions"><a class="ds-btn ds-btn-primary ds-icon-chevron-right" href="#">View course</a>
                            <button data-saved="false" class="ds-btn ds-icon-heart ds-icon--before ds-card__save--course-search" data-course="Master of Cybersecurity (Computer Science)">Save and
                                compare</button>
                            <div id="save-course-note" class="interaction-note"><button class="close-note" onclick="closeNote(this); return false;" data-ltu-cm-bp="ClosePopUpClicked"></button><p class="zero-margin">Master of Cybersecurity (Computer Science) added to "<a href="/courses/my-saved-courses?favourites=836928,836880" data-ltu-cm-bp="ViewSavedCoursesPopUpClicked">My saved courses</a>". Now you can <a class="compare-course-link" href="/courses/my-saved-courses/compare-courses?type=PG&amp;favourites=836928,836880">Compare them</a>.</p></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>