<div>
    <div class="modal-header">
        <div class="page-header">
            <h1 style="margin: 0px;" translate>
                PROMO.ACTION_CREATOR_TEXT
                <!--  <small translate>PROMO.ACTION_ADDING</small>-->
            </h1>
        </div>
    </div>


    <div class="modal-body">
        <div class="main-container-modal">

            <div ng-show="progress == 1">

                <div ng-show="showCategoriesList">
                    <span ng-repeat="path in chosenCategoriesPath">{{path.name}}</span>

                    <div class="row">
                        <div class="col-lg-12">
                            <div id="category-box">
                                <div class="category-content">
                                    <div class="category-topbar">
                                        <span ng-click="fetchSubcategories(0)" ><span translate>BACK_IN_CATEGORIES</span></span>
                                        <span ng-click="showCategories = !showCategories"><span translate>FILL</span></span>
                                    </div>
                                    <div ng-show="showCategories" class="categories"
                                         ng-repeat="cat in categories.content[indexOverCategories]">
                                        <a ng-ref="javascipt:void(0)"
                                           ng-click="fetchSubcategories(1, cat.id, cat.name)">
                                            {{cat.name}}
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div ng-show="progress ==2">

                <div>
                    <form role="form" class="form-box">
                        <div class="form-group">
                            <h3 style="text-align: center">{{type}}</h3>
                        </div>
                        <div class="form-group">
                            <input ng-model="newMessage.title"
                                   type="text" class="form-control"
                                   id="title" placeholder="Wpisz tytuł"
                                   maxlength="33" />
                        </div>

                        <div class="form-group">
                            <input ng-model="newMessage.params.text1"
                                   type="text" class="form-control"
                                   id="text1" placeholder="Wpisz tekst"
                                   maxlength="33" />
                        </div>

                        <div class="form-group">
                            <input ng-model="newMessage.params.text2"
                                   type="text" class="form-control"
                                   id="text2" placeholder="Wpisz tekst"
                                   maxlength="33" />
                        </div>

                        <input type="file" ng-model="newMessage.logo.fullImage"
                               ng-file-select="onFileSelect($files, $event.target)" multiple accept="image/*" id="upBtnLogo">
                        <div class="button" ng-file-select="onFileSelect($files, $event)" data-multiple="true"></div>
                        <br />
                        <button ng-click="upload.abort()" translate> CANCEL_UPLOAD</button>
                        <br />
                        <br />

                        <input type="file" ng-model="newMessage.params.prodImg.fullImage"
                               ng-file-select="onFileSelect($files, $event.target)" multiple accept="image/*" id="upBtnProduct">
                        <div class="button" ng-file-select="onFileSelect($files, $event)" data-multiple="true"></div>
                        <br />
                        <button ng-click="upload.abort()" translate> CANCEL_UPLOAD</button>
                        <br />
                        <br />
                    </form>
                </div>


                <div class="preview-small">
                    <!--<textarea>{{newAction.name}}</textarea>-->
                    <div id="preview-holder-tmp2" class="center">
                        <img ng-src="{{temporaryTemplatesList[selectedIndex].imgSrc}}" />
                        <div style="position: absolute; top:1px">
                            <textarea ng-model="newMessage.params.text1" id="title-textarea-tmp2" readonly cols="17" rows="1"
                                      style="text-align: center; font-size: 10px; border: 0px; font-weight: bold;">

                            </textarea>
                            <hr class="style-one" style="position: absolute;top:100px;left:120px;min-width: 130px" />
                            <hr class="style-one" style="position: absolute;top:135px;left:120px;min-width: 130px" />
                            <hr class="style-one" style="position: absolute;top:185px;left:120px;min-width: 130px" />
                            <textarea ng-model="newMessage.params.text2" id="description-box-tmp2" readonly cols="17" rows="1"
                                      style="text-align: center; font-size: 10px; border: 0px;margin-top: 10px">

                            </textarea>
                            <div id="logo-box">
                                <img class="logo-img" ng-if="newMessage.logoUrl.length > 0"
                                     ng-src="{{newMessage.logoUrl}}miniature.tb"
                                     style="width: 130px; height: 30px;" />
                            </div>
                            <hr class="style-one" style="position: absolute; top: 117px;" />
                            <div id="img-box" ng-if="newMessage.params.prodImg.length > 0">
                                <img ng-src="{{newMessage.params.prodImg}}miniature.tb" />
                            </div>
                        </div>
                    </div>
                </div>



            </div>
            <div ng-show="progress == 3">
                <ng-include src="'resources/views/DateAndBeaconsModalPage.html'"></ng-include>
            </div>
        </div>

    </div>

</div>

<div class="modal-footer">
    <button type="button" class="btn btn-default" ng-click="$dismiss(clearData(beaconList, newMessage))" translate>
        PROMO.CANCEL_TEXT
    </button>
    <button type="button" class="btn btn-default"  ng-show="!(progress ==2)"
            ng-click="progress = progress-1" >
        <span translate> PROMO.BACK_TEXT</span>
    </button>
    <button type="button" class="btn btn-info" ng-hide="progress ==3"
            ng-click="progress = progress+1" >
        <!--/*prepareForm(selectedIndex)*/ -->
        <span translate>  PROMO.NEXT_TEXT</span>
    </button>
    <button type="button" class="btn btn-info" ng-show="(progress == 3)" ng-if="newMessage.edited !== true" ng-click="$close(addNewAction(newMessage), showMe())" >
        <span translate>  PROMO.SAVE_TEXT</span>
    </button>
    <button type="button" class=" btn btn-info" ng-show="progress == 3" ng-if="newMessage.edited == true" ng-click="$close(sendChanges(newMessage, beaconList), showMe())" > <span translate>PROMO.SAVE_TEXT</span></button>

</div>