<div class="modal-header">
    <button type="button"
            class="close closebtn"
            data-ng-click="cancel()"
            aria-hidden="true">
        &times;
    </button>
    <h1 class="modal-title">
        {{'Webform' | translate}}
    </h1>
</div>


<div class="container-fluid wt-navRowContainer">
    <div class="row wt-navRow">
        <div class="col-sm-2 wt-fullHeightColumn wt-navMenuColumn" style="width:12%">
            <nav class="navbar navbar-default" role="navigation">
                <ul class="nav navbar-nav">
                    <li role="presentation"
                        ng-class="{ active: isActive('webformsettings')}">
                        <a href=""
                           ng-click="changeView('webformsettings')">
                            {{'Webform' | translate}}
                        </a>
                    </li>
                    <li role="presentation"
                        ng-class="{ active: isActive('listsettings')}">
                        <a href=""
                           ng-click="changeView('listsettings')">
                            {{'List' | translate}}
                        </a>
                    </li>
                    <li role="presentation"
                        ng-class="{ active: isActive('settings')}">
                        <a href=""
                           ng-click="changeView('settings')">
                            {{'Settings' | translate}}
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
        <div class="col-sm-10 wt-fullHeightColumn wt-navContentColumn"  style="width:88%">
            <div class="modal-body">
                <div ng-if="activeView === 'webformsettings'">
                    <div ng-hide="webform.rows == null">                        
                        <formly-form-editor rows="webform.rows"></formly-form-editor>
                    </div>
                </div>
                <div ng-if="activeView === 'listsettings'">
                    <br />
                    <div class="panel panel-default">
                        <div class="panel-heading">{{"List settings" | translate}}</div>
                        <div class="panel-body">
                            <div>
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox"
                                               ng-model="webform.list.isChecked"
                                               ng-disabled="true">
                                        {{"Save data in a list" | translate}}
                                    </label>
                                </div>
                                <div class="row">
                                    <div class="col-xs-4">
                                        <div class="form-group">
                                            <label for="exampleInputEmail1">
                                                {{"List title" | translate}}
                                            </label>
                                            <input type="text"
                                                   class="form-control"
                                                   placeholder="Insert title"
                                                   ng-model="webform.list.title">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div ng-if="activeView === 'settings'">
                    <br />
                    <div class="panel panel-default">
                        <div class="panel-heading">{{"Settings" | translate}}</div>
                        <div class="panel-body">
                            <div class="container-fluid">
                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="form-group">
                                            <label class="control-label">{{'Template' | translate}}</label>
                                            <wizdom365-template-picker template-url="wpProperties.templateUrl" directory-path="Webform/Templates/ViewTemplates"></wizdom365-template-picker>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="form-group">
                                            <label class="control-label">{{'Receipt text' | translate}}</label>
                                            <input type="text"
                                                   class="form-control"
                                                   placeholder=""
                                                   ng-model="wpProperties.receiptText">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <div class="modal-footer">
                <button class="btn btn-success wiz-btn-padding" ng-disabled="loading"
                        ng-click="updateConfig();">
                    {{"Save" | translate}}
                </button>
                <button class="btn btn-default wiz-btn-padding"
                        ng-click="cancel();">
                    {{"Cancel" | translate}}
                </button>
            </div>
        </div>
    </div>
</div>