<div class="modal-header">
    <button ng-click="cancel()" type="button" aria-label="Close" class="close closebtn">&times;</button>
    <span class="modal-title">{{'Interactive Canvas webpart' | translate}}</span>
</div>
<div class="modal-body">
    <div class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-4 control-label">{{'Tile height' | translate}}</label>
            <div class="col-sm-8">
                <input ng-model="settings.tileHeight" type="number" class="form-control" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-4 control-label">{{'Tile width' | translate}}</label>
            <div class="col-sm-8">
                <input ng-model="settings.tileWidth" type="number" step="0.001" class="form-control" />
                <small class="text-muted">{{'Values between 0 and 1 will be treated as percentage' | translate}}</small>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-4 control-label">{{'Tile padding' | translate}}</label>
            <div class="col-sm-8">
                <input ng-model="settings.tilePadding" type="number" class="form-control" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-4 control-label">{{'Default gallery category' | translate}}</label>
            <div class="col-sm-8">
                <select ng-model="settings.category" class="form-control">
                    <option></option>
                    <option ng-repeat="category in categories" value="{{::category.filter}}">{{::category.label}}</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-4 control-label">{{'Webpart classes' | translate}}</label>
            <div class="col-sm-8">
                <input ng-model="settings.webpartClasses" type="text" class="form-control" />
            </div>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button class="btn btn-success" ng-click="updateConfig();">{{'Save' | translate}}</button>
    <button class="btn btn-default" ng-click="cancel();">{{'Cancel' | translate}}</button>
</div>