<!--environment input dialog-->

<div>
    <div ng-if="uuidEnv==null">
        <h4>Environment Name</h4>
        <input type="text" ng-model="name" style="width:300px;" />

        <div style="text-align:center;margin-top:20px;">
            <button class="btn btn-default" ng-disabled=" name==null || name==''" ng-click="addEnvironment(name)">Create</button>
        </div>
    </div>


    <div style="display:flex;flex-direction:row;" ng-if="uuidEnv!=null&&showImage==null">
        <div>
            <h3> {{name}} -- Openrc
                <!--<button class="btn btn-default" style="float:right" ng-click="goNext()">Next</button>-->
                <button class="btn btn-default" ng-click="goToImage()" style="margin-bottom:20px;float:right" ng-disabled="showNextOpenRc==null && showNextOpenRc==null ">
                                        Next
                                </button>
            </h3>
            <!--<p>In this process, you can input your define openrc config or upload a openrc file</p>-->
            <div>

                <!--<button style="display:inline;" class="btn btn-default" ng-click="addEnvironment()" ng-show="uuid==null">Add Name</button>-->
            </div>

            <hr/>
            <div bs-tabs style="width:750px;">
                <div data-title="Detail" bs-pane ng-if="openrcInfo.openrc!=null">

                    <h4>
                        You have already set up the openrc parameters
                    </h4>
                    <hr />
                    <div ng-repeat="(key,value) in openrcInfo.openrc">
                        <nobr>
                            <font style="font-weight:600;font-size:14px;">{{key}} : </font>
                            <font style="font-size:14px;">{{value}}</font>
                        </nobr>
                    </div>

                </div>
                <div data-title="Update" bs-pane>

                    <div style="margin-top:20px;">
                        <button class="btn btn-default" ng-click="addInfo()" style="margin-bottom:20px;">Add</button>
                        <div style="height:300px;width:800px;display:flex;flex-direction:column;flex-wrap:wrap;margin-left:5px;overflow-x:scroll">
                            <div ng-repeat="info in envInfo">
                                <!--<div> {{info.name}}</div>-->

                                <input class="edit-title" ng-model="info.name" ng-class="{'null-edit-title':info.name==null}" ng-attr-type="{{info.name.indexOf('PASSWORD')>-1 ? password : text}}" />

                                <div class="item-info">
                                    <input class="form-control" type="text" ng-model="info.value" />
                                    <!--<button class="delete-button" ng-click="deleteEnvItem($index)">delete</button>-->
                                    <img src="images/close.png" ng-click="deleteEnvItem($index)" class="delete-img" />
                                </div>



                            </div>
                        </div>
                        <button class="btn btn-default" ng-click="submitOpenRcFile();" style="margin-bottom:20px;">
                                     <div ng-if="!showloading">Submit</div>
                                     <img src="images/loading2.gif" width="25" height="25" ng-if="showloading" />
                                </button>


                    </div>

                </div>
                <div data-title="Upload File" bs-pane>
                    <div style="margin-top:20px;height:405px;">
                        <button class="btn btn-default" style="margin-bottom:20px;" ngf-select="uploadFiles($file, $invalidFiles);" ngf-max-size="5MB">
                                    <div ng-show="!loadingOPENrc">Upload</div>
                                     <img src="images/loading2.gif" width="25" height="25" ng-if="loadingOPENrc" />
                                    </button>
                        <!--<button class="btn btn-default" style="margin-bottom:20px;" ng-disabled="showNextOpenRc==null" ng-click="goToImage()">
                                       Next
                        </button>-->

                        <!--<div ng-if="displayOpenrcFile!=null || displayOpenrcFile!=undefined">
                            {{displayOpenrcFile.name}} last modified: {{filelastModified}}
                        </div>-->
                    </div>
                </div>
            </div>



        </div>


    </div>

    <div ng-if="showImage==1&&showPod==null">
        <div style="display:flex;flex-direction:row;">
            <div style="width:750px;">

                <h3>{{name}} -- Image

                    <button class="btn btn-default" ng-click="goToPod()" ng-disabled="showNextPod==null" style="float:right">
                 Next
            </button>
                    <button class="btn btn-default" ng-click="goToPodPrev()" style="margin-right:5px;float:right">
                 Back
            </button>

                </h3>
                <!--<p>In this process, you can input your define openrc config or upload a openrc file</p>-->

                <hr/>

                <button class="btn btn-default" ng-click="uploadImage()">
                 <div ng-if="!showloading">Load Image</div>
                 <img src="images/loading2.gif" width="25" height="25" ng-if="showloading" />

                 </button>

                <i class="fa fa-check" aria-hidden="true" style="margin-top:34px;margin-left:5px;color: #2ecc71;" ng-show="imageStatus==1&&showImageStatus==1">done</i>
                <i class="fa fa-spinner" aria-hidden="true" style="margin-top:34px;margin-left:5px;color: #2ecc71;" ng-show="imageStatus==0&&showImageStatus==1">loading</i>
                <i class="fa fa-exclamation-triangle" aria-hidden="true" style="margin-top:34px;margin-left:5px;color: red;" ng-show="imageStatus==2&&showImageStatus==1">error</i>


                <!--<button class="btn btn-default" ng-click="goToPod()" ng-disabled="showNextPod==null">
                 Next
            </button>-->
                <hr>
                <h4>Current Images</h4>

                <div>
                    <table class="table table-striped">

                        <tr>
                            <th>name</th>
                            <th>size</th>
                            <th>status</th>
                            <th>time</th>
                        </tr>
                        <tr ng-repeat="image in imageListData">
                            <td>{{image.name}}</td>
                            <td>{{image.size/1024}} mb</td>
                            <td>{{image.status}}</td>
                            <td>{{image.time}}</td>

                        </tr>



                    </table>
                </div>


            </div>


        </div>
    </div>

    <div ng-if="showPod==1&&showContainer==null">
        <div style="display:flex;flex-direction:row;">
            <div style="width:750px;">


                <h3>{{name}} -- Pod File
                    <div style="float:right">
                        <button class="btn btn-default" ng-click="skipPodPrev()">Back</button>
                        <button class="btn btn-default" ng-click="skipPod()" ng-show="podData==null">Skip</button>
                        <button class="btn btn-default" ng-click="skipPod()" ng-show="podData!=null">Next</button>

                    </div>

                </h3>

                <hr/>

                <button class="btn btn-default" ngf-select="uploadFilesPod($file, $invalidFiles)" ngf-max-size="5MB">
                                    <div ng-show="!loadingOPENrc">Upload</div>
                                     <img src="images/loading2.gif" width="25" height="25" ng-if="loadingOPENrc" />
            </button>


                <hr/>

                <div>
                    <h4>Current Pod Configuration</h4>
                    <table class="table table-striped">

                        <tr>
                            <th>ip</th>
                            <th>name</th>
                            <th>password</th>
                            <th>role</th>
                            <th>user</th>
                        </tr>
                        <tr ng-repeat="pod in podData.pod.nodes">
                            <td>{{pod.ip}}</td>
                            <td>{{pod.name}}</td>
                            <td>{{pod.password}}</td>
                            <td>{{pod.role}}</td>
                            <td>{{pod.user}}</td>

                        </tr>
                        <tr ng-show="podData.length==0">
                            <td>no data</td>

                        </tr>



                    </table>
                </div>










            </div>


        </div>

    </div>

    <div ng-if="showContainer!=null">
        <div style="display:flex;flex-direction:row;">
            <div style="width:750px;">

                <h3>{{name}} -- Container
                    <div style="float:right">
                        <button class="btn btn-default" ng-click="skipContainerPrev()">Back</button>
                        <button class="btn btn-default" ng-click="skipContainer()" ng-show="ifskipOrClose!=1">
                            Skip
            </button>
                        <button class="btn btn-default" ng-click="closeThisDialog(); getEnvironmentList();" ng-show="ifskipOrClose==1">
                           Close
            </button>
                    </div>
                    <!--<button class="btn btn-default" style="float:right">Go Next</button>-->
                </h3>
                <!--<p>In this process, you can input your define openrc config or upload a openrc file</p>-->

                <hr/>

                <select ng-model="selectContainer" data-ng-options="container as container.name for container in containerList">
                <option value="">Choose...</option>
            </select>

                <button class="btn btn-default" ng-click="createContainer(selectContainer)" ng-disabled="selectContainer==null">
                                    <div ng-show="!showloading">Create</div>
                                    <img src="images/loading2.gif" width="25" height="25" ng-if="showloading" />
            </button>
                <!--<button class="btn btn-default" ng-click="skipContainer()" ng-show="ifskipOrClose!=1">
                            Skip
            </button>
                <button class="btn btn-default" ng-click="closeThisDialog(); getEnvironmentList();" ng-show="ifskipOrClose==1">
                           Close
            </button>-->

                <hr/>

                <div>
                    <h4>Current Contain</h4>
                    <table class="table table-striped">

                        <tr>
                            <th>name</th>
                            <th>status</th>
                            <th>time</th>

                        </tr>
                        <tr ng-repeat="con in displayContainerInfo">
                            <td>{{con.name}}</td>
                            <td>{{con.status}}</td>
                            <td>{{con.time}}</td>


                        </tr>



                    </table>
                </div>










            </div>


        </div>

    </div>






</div>


<style>
    input {
        border-radius: 10px;
        border: 1px solid #eeeeee;
        width: 100%;
    }

    select {
        height: 30px;
        border-radius: 5px;
        border: 1px solid #e8e8e8;
        width: 135px;
        margin-top: 20px;
        margin-left: 20px;
    }
</style>