Wizard Stap 3

<main>
    <h2 class="dso-steps-indicator">
        3. Kies activiteiten

        <span class="dso-step">
            Stap 3/7
        </span>
    </h2>

    <div class="clearfix"></div>
    <dso-alert status="info">
        Hulp nodig bij kiezen? Doe dan eerst de <a href="#">Vergunningscheck</a>.
    </dso-alert>
    <div class="clearfix"></div>
    <h2>Mijn activiteiten</h2>

    <div class="dso-shopping-cart">
        <div class="dso-contents">
            <p class="dso-empty">U heeft nog geen activiteiten gekozen</p>
        </div>

    </div>

    <div class="clearfix"></div>

    <form class="form-vertical">

        <fieldset>
            <legend>Zoek activiteiten</legend>

            <div class="form-group dso-filter">
                <div class="dso-label-container">
                    <label for="form-vertical-filter" class="control-label">
                        Zoekterm
                    </label>

                </div>
                <div class="dso-field-container">
                    <div class="dso-search-bar">
                        <div class="dso-search-bar-input">

                            <input type="text" id="form-vertical-filter_activiteiten" placeholder="Bijvoorbeeld bouwactiviteiten" />

                            <button type="button">
                                Zoekopdracht legen
                            </button>

                        </div>
                        <button type="button" class="btn btn-default sr-only">
                            Button
                        </button>
                    </div>

                </div>

            </div>

            <fieldset class="form-group dso-checkboxes">
                <legend class="sr-only">4 gevonden activiteiten</legend>
                <div class="dso-label-container">
                    <span class="control-label" aria-hidden>
                        4 gevonden activiteiten
                    </span>

                </div>
                <div class="dso-field-container">

                    <div class="dso-selectable">
                        <input type="checkbox" id="form-vertical-activiteiten-0" name="activiteiten" value="1">
                        <label for="form-vertical-activiteiten-0">
                            Bouwactiviteit - Melding
                        </label>

                    </div>

                    <div class="dso-selectable">
                        <input type="checkbox" id="form-vertical-activiteiten-1" name="activiteiten" value="2">
                        <label for="form-vertical-activiteiten-1">
                            Milieuactiviteit - Melding
                        </label>

                    </div>

                    <div class="dso-selectable">
                        <input type="checkbox" id="form-vertical-activiteiten-2" name="activiteiten" value="3">
                        <label for="form-vertical-activiteiten-2">
                            Milieuactiviteit - Aanvraag vergunning
                        </label>

                    </div>

                    <div class="dso-selectable">
                        <input type="checkbox" id="form-vertical-activiteiten-3" name="activiteiten" value="4">
                        <label for="form-vertical-activiteiten-3">
                            Gebruik en het in stand houden van bouwwerken ketentest - Melding
                        </label>

                    </div>

                </div>

            </fieldset>

        </fieldset>

        <div class="dso-form-buttons">

            <div class="dso-aside">

                <button type="link" class="btn btn-link">
                    <dso-icon icon="chevron-left"></dso-icon><span>Vorige stap</span>
                </button>

            </div>

            <button type="submit" class="btn btn-primary"><span>Volgende stap</span>
                <dso-icon icon="chevron-right"></dso-icon>
            </button>

        </div>

    </form>

</main>