<div ng-controller="Umbraco.Overlays.MacroPickerController">

    <div ng-switch="wizardStep">


        <div ng-switch-when="macroSelect">

            <div class="form-search">
                <i class="icon-search"></i>
                <input type="text"
                       style="width: 100%"
                       ng-model="searchTerm"
                       class="umb-search-field search-query input-block-level"
                       localize="placeholder"
                       placeholder="@placeholders_filter"
                       umb-auto-focus />
            </div>

            <ul class="umb-card-grid">
                <li ng-repeat="availableItem in macros | orderBy:'name' | filter:searchTerm"
                    ng-click="selectMacro(availableItem)"
                    class="-three-in-row">
                    <a class="umb-card-grid-item" href="" title="{{ availableItem.name }}">
                        <i class="icon-settings-alt"></i>
                        {{ availableItem.name }}
                    </a>
                </li>
            </ul>

            <umb-empty-state
                ng-if="nomacros"
                position="center">
                <localize key="defaultdialogs_noMacros">
                    There are no macros available to insert
                </localize>
            </umb-empty-state>
        </div>

        <div ng-switch-when="paramSelect">

            <h5>{{model.selectedMacro.name}}</h5>

            <ul class="unstyled">
                <li ng-repeat="param in model.macroParams">

                    <ng-form name="parameterForm">
                        <umb-control-group label="{{param.name}}">
                            <umb-editor model="param"></umb-editor>
                        </umb-control-group>
                    </ng-form>

                </li>
            </ul>

            <umb-empty-state
                ng-if="noMacroParams"
                position="center">
                <localize key="defaultdialogs_noMacroParams">There are no parameters for this macro</localize>
            </umb-empty-state>

        </div>
    </div>

</div>
