<div class="modal fade" id="search-filter" tabindex="-1" role="dialog" aria-labelledby="search-filter-label" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content border-0 rounded">
            <nav class="nav border-bottom p-3 flex-row justify-content-between align-items-center sticky-top bg-white rounded-top">
                <div id="search-filter-label" class="d-flex justify-content-between">
                    <h3 class=" m-0">Filtrera</h3>

                </div>
                <a href="#" class="d-block">Nollställ filter</a>
                <button type="button" class="border-0 bg-transparent cursor-pointer lh-0 p-2 nm-2" data-dismiss="modal" aria-controls="mobileMenu" aria-expanded="false" aria-label="Dölj meny">
          <span aria-hidden="true"><i class="fal fa-times fa-lg"></i></span>
        </button>
            </nav>
            <div class="p-3">
                <form action="" class="form">
                    <fieldset class="form-group">
                        <legend>Visa endast</legend>
                        <div class=" mb-2">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="filter1-1-modal" name="checkbox" value="value">
                                <label class="custom-control-label" for="filter1-1-modal">Öppen för anmälan</label>
                            </div>
                        </div>

                        <div class=" mb-2">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="filter1-2-modal" name="checkbox" value="value">
                                <label class="custom-control-label" for="filter1-2-modal">Distansutbildningar</label>
                            </div>
                        </div>

                        <div class=" mb-2">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="filter1-3-modal" name="checkbox" value="value">
                                <label class="custom-control-label" for="filter1-3-modal">Sommarkurser</label>
                            </div>
                        </div>

                        <div class=" mb-2">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="filter1-4-modal" name="checkbox" value="value">
                                <label class="custom-control-label" for="filter1-4-modal">Kvällskurser</label>
                            </div>
                        </div>

                    </fieldset>
                    <fieldset class="form-group">
                        <legend>Utbildningsnivå</legend>
                        <div class=" mb-2">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="filter2-1-modal" name="checkbox" value="value" checked>
                                <label class="custom-control-label" for="filter2-1-modal">Förutbildning</label>
                            </div>
                        </div>

                        <div class=" mb-2">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="filter2-2-modal" name="checkbox" value="value" checked>
                                <label class="custom-control-label" for="filter2-2-modal">Grundnivå</label>
                            </div>
                        </div>

                        <div class=" mb-2">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="filter2-3-modal" name="checkbox" value="value" checked>
                                <label class="custom-control-label" for="filter2-3-modal">Avancerad nivå</label>
                            </div>
                        </div>

                    </fieldset>
                    <fieldset class="form-group">
                        <legend>Intresseområden</legend>
                        <div class=" mb-2">
                            <div class="custom-control custom-radio">
                                <input type="radio" id="filter3-1-modal" name="intresseomraden" class="custom-control-input" value="value" checked>
                                <label class="custom-control-label" for="filter3-1-modal">Alla</label>
                            </div>
                        </div>

                        <div class=" mb-2">
                            <div class="custom-control custom-radio">
                                <input type="radio" id="filter3-2-modal" name="intresseomraden" class="custom-control-input" value="value">
                                <label class="custom-control-label" for="filter3-2-modal">Ekonomi &amp; juridik</label>
                            </div>
                        </div>

                        <div class=" mb-2">
                            <div class="custom-control custom-radio">
                                <input type="radio" id="filter3-3-modal" name="intresseomraden" class="custom-control-input" value="value">
                                <label class="custom-control-label" for="filter3-3-modal">IT</label>
                            </div>
                        </div>

                        <div class=" mb-2">
                            <div class="custom-control custom-radio">
                                <input type="radio" id="filter3-4-modal" name="intresseomraden" class="custom-control-input" value="value">
                                <label class="custom-control-label" for="filter3-4-modal">Konst, Design, Musik, Film och Teater</label>
                            </div>
                        </div>

                        <div class=" mb-2">
                            <div class="custom-control custom-radio">
                                <input type="radio" id="filter3-5-modal" name="intresseomraden" class="custom-control-input" value="value">
                                <label class="custom-control-label" for="filter3-5-modal">Medicin, Vård och Hälsa</label>
                            </div>
                        </div>

                        <div class=" mb-2">
                            <div class="custom-control custom-radio">
                                <input type="radio" id="filter3-6-modal" name="intresseomraden" class="custom-control-input" value="value">
                                <label class="custom-control-label" for="filter3-6-modal">Naturvetenskap</label>
                            </div>
                        </div>

                        <div class=" mb-2">
                            <div class="custom-control custom-radio">
                                <input type="radio" id="filter3-7-modal" name="intresseomraden" class="custom-control-input" value="value">
                                <label class="custom-control-label" for="filter3-7-modal">Samhälls- och Beteendevetenskap</label>
                            </div>
                        </div>

                        <div class=" mb-2">
                            <div class="custom-control custom-radio">
                                <input type="radio" id="filter3-8-modal" name="intresseomraden" class="custom-control-input" value="value">
                                <label class="custom-control-label" for="filter3-8-modal">Språk</label>
                            </div>
                        </div>

                        <div class=" mb-2">
                            <div class="custom-control custom-radio">
                                <input type="radio" id="filter3-9-modal" name="intresseomraden" class="custom-control-input" value="value">
                                <label class="custom-control-label" for="filter3-9-modal">Teknik</label>
                            </div>
                        </div>

                        <div class=" mb-2">
                            <div class="custom-control custom-radio">
                                <input type="radio" id="filter3-10-modal" name="intresseomraden" class="custom-control-input" value="value">
                                <label class="custom-control-label" for="filter3-10-modal">Utbildning, Pedagogik och Lärande</label>
                            </div>
                        </div>

                    </fieldset>
                    <fieldset class="form-group">
                        <legend>Studietakt</legend>
                        <div class=" mb-2">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="filter4-1-modal" name="checkbox" value="value" checked>
                                <label class="custom-control-label" for="filter4-1-modal">Heltid</label>
                            </div>
                        </div>

                        <div class=" mb-2">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="filter4-2-modal" name="checkbox" value="value" checked>
                                <label class="custom-control-label" for="filter4-2-modal">Upp till och med 75%</label>
                            </div>
                        </div>

                        <div class=" mb-2">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="filter4-3-modal" name="checkbox" value="value" checked>
                                <label class="custom-control-label" for="filter4-3-modal">Upp till och med 50%</label>
                            </div>
                        </div>

                        <div class=" mb-2">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="filter4-4-modal" name="checkbox" value="value">
                                <label class="custom-control-label" for="filter4-4-modal">Upp till och med 25%</label>
                            </div>
                        </div>

                    </fieldset>
                    <fieldset class="form-group">
                        <legend>Starttermin</legend>
                        <div class=" mb-2">
                            <div class="custom-control custom-radio">
                                <input type="radio" id="filter5-1-modal" name="starttermin" class="custom-control-input" value="value">
                                <label class="custom-control-label" for="filter5-1-modal">Alla</label>
                            </div>
                        </div>

                        <div class=" mb-2">
                            <div class="custom-control custom-radio">
                                <input type="radio" id="filter5-2-modal" name="starttermin" class="custom-control-input" value="value">
                                <label class="custom-control-label" for="filter5-2-modal">Hösten 2018</label>
                            </div>
                        </div>

                        <div class=" mb-2">
                            <div class="custom-control custom-radio">
                                <input type="radio" id="filter5-3-modal" name="starttermin" class="custom-control-input" value="value" checked>
                                <label class="custom-control-label" for="filter5-3-modal">Våren 2019</label>
                            </div>
                        </div>

                    </fieldset>
                    <fieldset class="form-group">
                        <legend>Utbildningsort</legend>
                        <div class=" mb-2">
                            <div class="custom-control custom-radio">
                                <input type="radio" id="filter6-1-modal" name="utbildningsort" class="custom-control-input" value="value">
                                <label class="custom-control-label" for="filter6-1-modal">Alla</label>
                            </div>
                        </div>

                        <div class=" mb-2">
                            <div class="custom-control custom-radio">
                                <input type="radio" id="filter6-2-modal" name="utbildningsort" class="custom-control-input" value="value">
                                <label class="custom-control-label" for="filter6-2-modal">Lund</label>
                            </div>
                        </div>

                        <div class=" mb-2">
                            <div class="custom-control custom-radio">
                                <input type="radio" id="filter6-3-modal" name="utbildningsort" class="custom-control-input" value="value" checked>
                                <label class="custom-control-label" for="filter6-3-modal">Malmö</label>
                            </div>
                        </div>

                        <div class=" mb-2">
                            <div class="custom-control custom-radio">
                                <input type="radio" id="filter6-4-modal" name="utbildningsort" class="custom-control-input" value="value">
                                <label class="custom-control-label" for="filter6-4-modal">Helsingborg</label>
                            </div>
                        </div>

                        <div class=" mb-2">
                            <div class="custom-control custom-radio">
                                <input type="radio" id="filter6-5-modal" name="utbildningsort" class="custom-control-input" value="value">
                                <label class="custom-control-label" for="filter6-5-modal">Klippan</label>
                            </div>
                        </div>

                        <div class=" mb-2">
                            <div class="custom-control custom-radio">
                                <input type="radio" id="filter6-6-modal" name="utbildningsort" class="custom-control-input" value="value">
                                <label class="custom-control-label" for="filter6-6-modal">Båstad</label>
                            </div>
                        </div>

                        <div class=" mb-2">
                            <div class="custom-control custom-radio">
                                <input type="radio" id="filter6-7-modal" name="utbildningsort" class="custom-control-input" value="value">
                                <label class="custom-control-label" for="filter6-7-modal">Karlskrona</label>
                            </div>
                        </div>

                        <div class=" mb-2">
                            <div class="custom-control custom-radio">
                                <input type="radio" id="filter6-8-modal" name="utbildningsort" class="custom-control-input" value="value">
                                <label class="custom-control-label" for="filter6-8-modal">Växjö</label>
                            </div>
                        </div>

                    </fieldset>
                    <fieldset class="form-group">
                        <legend>Undervisningsspråk</legend>
                        <div class=" mb-2">
                            <div class="custom-control custom-radio">
                                <input type="radio" id="filter7-1-modal" name="undervisningssprak" class="custom-control-input" value="value">
                                <label class="custom-control-label" for="filter7-1-modal">Alla</label>
                            </div>
                        </div>

                        <div class=" mb-2">
                            <div class="custom-control custom-radio">
                                <input type="radio" id="filter7-2-modal" name="undervisningssprak" class="custom-control-input" value="value" checked>
                                <label class="custom-control-label" for="filter7-2-modal">Svenska</label>
                            </div>
                        </div>

                        <div class=" mb-2">
                            <div class="custom-control custom-radio">
                                <input type="radio" id="filter7-3-modal" name="undervisningssprak" class="custom-control-input" value="value">
                                <label class="custom-control-label" for="filter7-3-modal">Engelska</label>
                            </div>
                        </div>

                    </fieldset>
                    <div class="mt-3 text-center">
                        <input type="submit" class="btn btn-primary" value="Tillämpa">

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

<div class="d-lg-none text-center mb-5">
    <a class="btn btn-primary" href="#search-filter" data-toggle="modal" aria-controls="search-filter" aria-expanded="false" aria-label="Visa filter"> Fler filter</a>
</div>

<div class="bg-plaster-25 p-3 p-xl-5 d-none d-lg-block">
    <div class="row mb-3">
        <div class="col">
            <h4 class="mt-0">Filtrera</h4>
        </div>
        <div class="col text-right">
            <a href="#">Nollställ filter</a>
        </div>
    </div>
    <div class="row">
        <div class="col-12 mb-5">
            <fieldset>
                <legend>Visa endast</legend>
                <div class=" mb-2">
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="filter1-1" name="checkbox" value="value">
                        <label class="custom-control-label" for="filter1-1">Öppen för anmälan</label>
                    </div>
                </div>

                <div class=" mb-2">
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="filter1-2" name="checkbox" value="value">
                        <label class="custom-control-label" for="filter1-2">Distansutbildningar</label>
                    </div>
                </div>

                <div class=" mb-2">
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="filter1-3" name="checkbox" value="value">
                        <label class="custom-control-label" for="filter1-3">Sommarkurser</label>
                    </div>
                </div>

                <div class=" mb-2">
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="filter1-4" name="checkbox" value="value">
                        <label class="custom-control-label" for="filter1-4">Kvällskurser</label>
                    </div>
                </div>

            </fieldset>
        </div>
        <div class="col-12 mb-5">
            <fieldset>
                <legend>Utbildningsnivå</legend>
                <div class=" mb-2">
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="filter2-1" name="checkbox" value="value" checked>
                        <label class="custom-control-label" for="filter2-1">Förutbildning</label>
                    </div>
                </div>

                <div class=" mb-2">
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="filter2-2" name="checkbox" value="value" checked>
                        <label class="custom-control-label" for="filter2-2">Grundnivå</label>
                    </div>
                </div>

                <div class=" mb-2">
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="filter2-3" name="checkbox" value="value" checked>
                        <label class="custom-control-label" for="filter2-3">Avancerad nivå</label>
                    </div>
                </div>

            </fieldset>
        </div>
        <div class="col-12 mb-5">
            <fieldset>
                <legend>Intresseområden</legend>
                <div class=" mb-2">
                    <div class="custom-control custom-radio">
                        <input type="radio" id="filter3-1" name="intresseomraden" class="custom-control-input" value="value" checked>
                        <label class="custom-control-label" for="filter3-1">Alla</label>
                    </div>
                </div>

                <div class=" mb-2">
                    <div class="custom-control custom-radio">
                        <input type="radio" id="filter3-2" name="intresseomraden" class="custom-control-input" value="value">
                        <label class="custom-control-label" for="filter3-2">Ekonomi &amp; juridik</label>
                    </div>
                </div>

                <div class=" mb-2">
                    <div class="custom-control custom-radio">
                        <input type="radio" id="filter3-3" name="intresseomraden" class="custom-control-input" value="value">
                        <label class="custom-control-label" for="filter3-3">IT</label>
                    </div>
                </div>

                <div class=" mb-2">
                    <div class="custom-control custom-radio">
                        <input type="radio" id="filter3-4" name="intresseomraden" class="custom-control-input" value="value">
                        <label class="custom-control-label" for="filter3-4">Konst, Design, Musik, Film och Teater</label>
                    </div>
                </div>

                <div class=" mb-2">
                    <div class="custom-control custom-radio">
                        <input type="radio" id="filter3-5" name="intresseomraden" class="custom-control-input" value="value">
                        <label class="custom-control-label" for="filter3-5">Medicin, Vård och Hälsa</label>
                    </div>
                </div>

                <div class=" mb-2">
                    <div class="custom-control custom-radio">
                        <input type="radio" id="filter3-6" name="intresseomraden" class="custom-control-input" value="value">
                        <label class="custom-control-label" for="filter3-6">Naturvetenskap</label>
                    </div>
                </div>

                <div class=" mb-2">
                    <div class="custom-control custom-radio">
                        <input type="radio" id="filter3-7" name="intresseomraden" class="custom-control-input" value="value">
                        <label class="custom-control-label" for="filter3-7">Samhälls- och Beteendevetenskap</label>
                    </div>
                </div>

                <div class=" mb-2">
                    <div class="custom-control custom-radio">
                        <input type="radio" id="filter3-8" name="intresseomraden" class="custom-control-input" value="value">
                        <label class="custom-control-label" for="filter3-8">Språk</label>
                    </div>
                </div>

                <div class=" mb-2">
                    <div class="custom-control custom-radio">
                        <input type="radio" id="filter3-9" name="intresseomraden" class="custom-control-input" value="value">
                        <label class="custom-control-label" for="filter3-9">Teknik</label>
                    </div>
                </div>

                <div class=" mb-2">
                    <div class="custom-control custom-radio">
                        <input type="radio" id="filter3-10" name="intresseomraden" class="custom-control-input" value="value">
                        <label class="custom-control-label" for="filter3-10">Utbildning, Pedagogik och Lärande</label>
                    </div>
                </div>

            </fieldset>
        </div>
        <div class="col-12 mb-5">
            <fieldset>
                <legend>Studietakt</legend>
                <div class=" mb-2">
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="filter4-1" name="checkbox" value="value" checked>
                        <label class="custom-control-label" for="filter4-1">Heltid</label>
                    </div>
                </div>

                <div class=" mb-2">
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="filter4-2" name="checkbox" value="value" checked>
                        <label class="custom-control-label" for="filter4-2">Upp till och med 75%</label>
                    </div>
                </div>

                <div class=" mb-2">
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="filter4-3" name="checkbox" value="value" checked>
                        <label class="custom-control-label" for="filter4-3">Upp till och med 50%</label>
                    </div>
                </div>

                <div class=" mb-2">
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="filter4-4" name="checkbox" value="value">
                        <label class="custom-control-label" for="filter4-4">Upp till och med 25%</label>
                    </div>
                </div>

            </fieldset>
        </div>
        <div class="col-12 mb-5">
            <fieldset>
                <legend>Starttermin</legend>
                <div class=" mb-2">
                    <div class="custom-control custom-radio">
                        <input type="radio" id="filter5-1" name="starttermin" class="custom-control-input" value="value">
                        <label class="custom-control-label" for="filter5-1">Alla</label>
                    </div>
                </div>

                <div class=" mb-2">
                    <div class="custom-control custom-radio">
                        <input type="radio" id="filter5-2" name="starttermin" class="custom-control-input" value="value">
                        <label class="custom-control-label" for="filter5-2">Hösten 2018</label>
                    </div>
                </div>

                <div class=" mb-2">
                    <div class="custom-control custom-radio">
                        <input type="radio" id="filter5-3" name="starttermin" class="custom-control-input" value="value" checked>
                        <label class="custom-control-label" for="filter5-3">Våren 2019</label>
                    </div>
                </div>

            </fieldset>
        </div>
        <div class="col-12 mb-5">
            <fieldset>
                <legend>Utbildningsort</legend>
                <div class=" mb-2">
                    <div class="custom-control custom-radio">
                        <input type="radio" id="filter6-1" name="utbildningsort" class="custom-control-input" value="value">
                        <label class="custom-control-label" for="filter6-1">Alla</label>
                    </div>
                </div>

                <div class=" mb-2">
                    <div class="custom-control custom-radio">
                        <input type="radio" id="filter6-2" name="utbildningsort" class="custom-control-input" value="value">
                        <label class="custom-control-label" for="filter6-2">Lund</label>
                    </div>
                </div>

                <div class=" mb-2">
                    <div class="custom-control custom-radio">
                        <input type="radio" id="filter6-3" name="utbildningsort" class="custom-control-input" value="value" checked>
                        <label class="custom-control-label" for="filter6-3">Malmö</label>
                    </div>
                </div>

                <div class=" mb-2">
                    <div class="custom-control custom-radio">
                        <input type="radio" id="filter6-4" name="utbildningsort" class="custom-control-input" value="value">
                        <label class="custom-control-label" for="filter6-4">Helsingborg</label>
                    </div>
                </div>

                <div class=" mb-2">
                    <div class="custom-control custom-radio">
                        <input type="radio" id="filter6-5" name="utbildningsort" class="custom-control-input" value="value">
                        <label class="custom-control-label" for="filter6-5">Klippan</label>
                    </div>
                </div>

                <div class=" mb-2">
                    <div class="custom-control custom-radio">
                        <input type="radio" id="filter6-6" name="utbildningsort" class="custom-control-input" value="value">
                        <label class="custom-control-label" for="filter6-6">Båstad</label>
                    </div>
                </div>

                <div class=" mb-2">
                    <div class="custom-control custom-radio">
                        <input type="radio" id="filter6-7" name="utbildningsort" class="custom-control-input" value="value">
                        <label class="custom-control-label" for="filter6-7">Karlskrona</label>
                    </div>
                </div>

                <div class=" mb-2">
                    <div class="custom-control custom-radio">
                        <input type="radio" id="filter6-8" name="utbildningsort" class="custom-control-input" value="value">
                        <label class="custom-control-label" for="filter6-8">Växjö</label>
                    </div>
                </div>

            </fieldset>
        </div>
        <div class="col-12">
            <fieldset>
                <legend>Undervisningsspråk</legend>
                <div class=" mb-2">
                    <div class="custom-control custom-radio">
                        <input type="radio" id="filter7-1" name="undervisningssprak" class="custom-control-input" value="value">
                        <label class="custom-control-label" for="filter7-1">Alla</label>
                    </div>
                </div>

                <div class=" mb-2">
                    <div class="custom-control custom-radio">
                        <input type="radio" id="filter7-2" name="undervisningssprak" class="custom-control-input" value="value" checked>
                        <label class="custom-control-label" for="filter7-2">Svenska</label>
                    </div>
                </div>

                <div class=" mb-2">
                    <div class="custom-control custom-radio">
                        <input type="radio" id="filter7-3" name="undervisningssprak" class="custom-control-input" value="value">
                        <label class="custom-control-label" for="filter7-3">Engelska</label>
                    </div>
                </div>

            </fieldset>
        </div>
    </div>
</div>
<div class="modal fade" id="{{modal-id}}" tabindex="-1" role="dialog" aria-labelledby="{{modal-id}}-label" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content border-0 rounded">
      <nav class="nav border-bottom p-3 flex-row justify-content-between align-items-center sticky-top bg-white rounded-top">
        <div id="{{modal-id}}-label" class="d-flex justify-content-between">
          <h3 class=" m-0">{{title}}</h3>

        </div>
        <a href="#" class="d-block">Nollställ filter</a>
        <button type="button" class="border-0 bg-transparent cursor-pointer lh-0 p-2 nm-2" data-dismiss="modal" aria-controls="mobileMenu" aria-expanded="false" aria-label="Dölj meny">
          <span aria-hidden="true"><i class="fal fa-times fa-lg"></i></span>
        </button>
      </nav>
      <div class="p-3">
        <form action="" class="form">
          {{#each modal-filters}}
            <fieldset class="form-group">
              <legend>{{title}}</legend>
              {{#if checkbox}}
                {{#each checkbox.items}}
                  {{render "@form-checkbox--spaced" this merge=true}}
                {{/each}}
              {{/if}}
              {{#if radio}}
                {{#each radio.items}}
                  {{render "@form-radio--spaced" this merge=true}}
                {{/each}}
              {{/if}}
            {{#if select}}
              {{render "@form-select" select merge=true}}
            {{/if}}
            </fieldset>
          {{/each}}
          <div class="mt-3 text-center">
            {{render "@form-submit" modal-submit merge=true}}
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<div class="d-lg-none text-center mb-5">
  <a class="btn btn-primary" href="#{{modal-id}}" data-toggle="modal" aria-controls="{{modal-id}}" aria-expanded="false"
     aria-label="Visa filter"> Fler filter</a>
</div>

<div class="bg-plaster-25 p-3 p-xl-5 d-none d-lg-block">
  <div class="row mb-3">
    <div class="col">
      <h4 class="mt-0">{{title}}</h4>
    </div>
    <div class="col text-right">
      <a href="#">Nollställ filter</a>
    </div>
  </div>
  <div class="row">
    {{#each filters}}
      <div class="col-12{{#unless @last}} mb-5{{/unless}}">
        <fieldset>
          <legend>{{title}}</legend>
          {{#if checkbox}}
            {{#each checkbox.items}}
              {{render "@form-checkbox--spaced" this merge=true}}
            {{/each}}
          {{/if}}
          {{#if radio}}
            {{#each radio.items}}
              {{render "@form-radio--spaced" this merge=true}}
            {{/each}}
          {{/if}}
          {{#if select}}
            {{render "@form-select--tight" select merge=true}}
          {{/if}}
        </fieldset>
      </div>
    {{/each}}
  </div>
</div>
{
  "modal-id": "search-filter",
  "title": "Filtrera",
  "modal-submit": {
    "label": "Tillämpa"
  },
  "filters": [
    {
      "title": "Visa endast",
      "checkbox": {
        "items": [
          {
            "label": "Öppen för anmälan",
            "id": "filter1-1"
          },
          {
            "label": "Distansutbildningar",
            "id": "filter1-2"
          },
          {
            "label": "Sommarkurser",
            "id": "filter1-3"
          },
          {
            "label": "Kvällskurser",
            "id": "filter1-4"
          }
        ]
      }
    },
    {
      "title": "Utbildningsnivå",
      "checkbox": {
        "items": [
          {
            "label": "Förutbildning",
            "id": "filter2-1",
            "checked": true
          },
          {
            "label": "Grundnivå",
            "id": "filter2-2",
            "checked": true
          },
          {
            "label": "Avancerad nivå",
            "id": "filter2-3",
            "checked": true
          }
        ]
      }
    },
    {
      "title": "Intresseområden",
      "radio": {
        "items": [
          {
            "name": "intresseomraden",
            "label": "Alla",
            "id": "filter3-1",
            "checked": true
          },
          {
            "name": "intresseomraden",
            "label": "Ekonomi & juridik",
            "id": "filter3-2"
          },
          {
            "name": "intresseomraden",
            "label": "IT",
            "id": "filter3-3"
          },
          {
            "name": "intresseomraden",
            "label": "Konst, Design, Musik, Film och Teater",
            "id": "filter3-4"
          },
          {
            "name": "intresseomraden",
            "label": "Medicin, Vård och Hälsa",
            "id": "filter3-5"
          },
          {
            "name": "intresseomraden",
            "label": "Naturvetenskap",
            "id": "filter3-6"
          },
          {
            "name": "intresseomraden",
            "label": "Samhälls- och Beteendevetenskap",
            "id": "filter3-7"
          },
          {
            "name": "intresseomraden",
            "label": "Språk",
            "id": "filter3-8"
          },
          {
            "name": "intresseomraden",
            "label": "Teknik",
            "id": "filter3-9"
          },
          {
            "name": "intresseomraden",
            "label": "Utbildning, Pedagogik och Lärande",
            "id": "filter3-10"
          }
        ]
      }
    },
    {
      "title": "Studietakt",
      "checkbox": {
        "items": [
          {
            "label": "Heltid",
            "id": "filter4-1",
            "checked": true
          },
          {
            "label": "Upp till och med 75%",
            "id": "filter4-2",
            "checked": true
          },
          {
            "label": "Upp till och med 50%",
            "id": "filter4-3",
            "checked": true
          },
          {
            "label": "Upp till och med 25%",
            "id": "filter4-4"
          }
        ]
      }
    },
    {
      "title": "Starttermin",
      "radio": {
        "items": [
          {
            "name": "starttermin",
            "label": "Alla",
            "id": "filter5-1"
          },
          {
            "name": "starttermin",
            "label": "Hösten 2018",
            "id": "filter5-2"
          },
          {
            "name": "starttermin",
            "label": "Våren 2019",
            "id": "filter5-3",
            "checked": true
          }
        ]
      }
    },
    {
      "title": "Utbildningsort",
      "radio": {
        "items": [
          {
            "name": "utbildningsort",
            "label": "Alla",
            "id": "filter6-1"
          },
          {
            "name": "utbildningsort",
            "label": "Lund",
            "id": "filter6-2"
          },
          {
            "name": "utbildningsort",
            "label": "Malmö",
            "id": "filter6-3",
            "checked": true
          },
          {
            "name": "utbildningsort",
            "label": "Helsingborg",
            "id": "filter6-4"
          },
          {
            "name": "utbildningsort",
            "label": "Klippan",
            "id": "filter6-5"
          },
          {
            "name": "utbildningsort",
            "label": "Båstad",
            "id": "filter6-6"
          },
          {
            "name": "utbildningsort",
            "label": "Karlskrona",
            "id": "filter6-7"
          },
          {
            "name": "utbildningsort",
            "label": "Växjö",
            "id": "filter6-8"
          }
        ]
      }
    },
    {
      "title": "Undervisningsspråk",
      "radio": {
        "items": [
          {
            "name": "undervisningssprak",
            "label": "Alla",
            "id": "filter7-1"
          },
          {
            "name": "undervisningssprak",
            "label": "Svenska",
            "id": "filter7-2",
            "checked": true
          },
          {
            "name": "undervisningssprak",
            "label": "Engelska",
            "id": "filter7-3"
          }
        ]
      }
    }
  ],
  "modal-filters": [
    {
      "title": "Visa endast",
      "checkbox": {
        "items": [
          {
            "label": "Öppen för anmälan",
            "id": "filter1-1-modal"
          },
          {
            "label": "Distansutbildningar",
            "id": "filter1-2-modal"
          },
          {
            "label": "Sommarkurser",
            "id": "filter1-3-modal"
          },
          {
            "label": "Kvällskurser",
            "id": "filter1-4-modal"
          }
        ]
      }
    },
    {
      "title": "Utbildningsnivå",
      "checkbox": {
        "items": [
          {
            "label": "Förutbildning",
            "id": "filter2-1-modal",
            "checked": true
          },
          {
            "label": "Grundnivå",
            "id": "filter2-2-modal",
            "checked": true
          },
          {
            "label": "Avancerad nivå",
            "id": "filter2-3-modal",
            "checked": true
          }
        ]
      }
    },
    {
      "title": "Intresseområden",
      "radio": {
        "items": [
          {
            "name": "intresseomraden",
            "label": "Alla",
            "id": "filter3-1-modal",
            "checked": true
          },
          {
            "name": "intresseomraden",
            "label": "Ekonomi & juridik",
            "id": "filter3-2-modal"
          },
          {
            "name": "intresseomraden",
            "label": "IT",
            "id": "filter3-3-modal"
          },
          {
            "name": "intresseomraden",
            "label": "Konst, Design, Musik, Film och Teater",
            "id": "filter3-4-modal"
          },
          {
            "name": "intresseomraden",
            "label": "Medicin, Vård och Hälsa",
            "id": "filter3-5-modal"
          },
          {
            "name": "intresseomraden",
            "label": "Naturvetenskap",
            "id": "filter3-6-modal"
          },
          {
            "name": "intresseomraden",
            "label": "Samhälls- och Beteendevetenskap",
            "id": "filter3-7-modal"
          },
          {
            "name": "intresseomraden",
            "label": "Språk",
            "id": "filter3-8-modal"
          },
          {
            "name": "intresseomraden",
            "label": "Teknik",
            "id": "filter3-9-modal"
          },
          {
            "name": "intresseomraden",
            "label": "Utbildning, Pedagogik och Lärande",
            "id": "filter3-10-modal"
          }
        ]
      }
    },
    {
      "title": "Studietakt",
      "checkbox": {
        "items": [
          {
            "label": "Heltid",
            "id": "filter4-1-modal",
            "checked": true
          },
          {
            "label": "Upp till och med 75%",
            "id": "filter4-2-modal",
            "checked": true
          },
          {
            "label": "Upp till och med 50%",
            "id": "filter4-3-modal",
            "checked": true
          },
          {
            "label": "Upp till och med 25%",
            "id": "filter4-4-modal"
          }
        ]
      }
    },
    {
      "title": "Starttermin",
      "radio": {
        "items": [
          {
            "name": "starttermin",
            "label": "Alla",
            "id": "filter5-1-modal"
          },
          {
            "name": "starttermin",
            "label": "Hösten 2018",
            "id": "filter5-2-modal"
          },
          {
            "name": "starttermin",
            "label": "Våren 2019",
            "id": "filter5-3-modal",
            "checked": true
          }
        ]
      }
    },
    {
      "title": "Utbildningsort",
      "radio": {
        "items": [
          {
            "name": "utbildningsort",
            "label": "Alla",
            "id": "filter6-1-modal"
          },
          {
            "name": "utbildningsort",
            "label": "Lund",
            "id": "filter6-2-modal"
          },
          {
            "name": "utbildningsort",
            "label": "Malmö",
            "id": "filter6-3-modal",
            "checked": true
          },
          {
            "name": "utbildningsort",
            "label": "Helsingborg",
            "id": "filter6-4-modal"
          },
          {
            "name": "utbildningsort",
            "label": "Klippan",
            "id": "filter6-5-modal"
          },
          {
            "name": "utbildningsort",
            "label": "Båstad",
            "id": "filter6-6-modal"
          },
          {
            "name": "utbildningsort",
            "label": "Karlskrona",
            "id": "filter6-7-modal"
          },
          {
            "name": "utbildningsort",
            "label": "Växjö",
            "id": "filter6-8-modal"
          }
        ]
      }
    },
    {
      "title": "Undervisningsspråk",
      "radio": {
        "items": [
          {
            "name": "undervisningssprak",
            "label": "Alla",
            "id": "filter7-1-modal"
          },
          {
            "name": "undervisningssprak",
            "label": "Svenska",
            "id": "filter7-2-modal",
            "checked": true
          },
          {
            "name": "undervisningssprak",
            "label": "Engelska",
            "id": "filter7-3-modal"
          }
        ]
      }
    }
  ]
}

There are no notes for this item.