<div class="content">
    <i class="fa fa-arrow-left fa-1x" aria-hidden="true" style="color: #999;cursor:pointer" ng-click="goBack()">Back</i>
    <h4>Modify </h4>

    <hr/>

    <div>
        <div style="display:inline">Name <input type="text" ng-model="taskDetailData.name" style="width:200px" /></div>

        <button class="btn btn-default" ng-click="runAtask()" style="float:right;margin-right:10px;">Run</button>
    </div>
    <hr/>

    <div bs-tabs>
        <div data-title="Environment" bs-pane>
            <div style="margin-top:10px">
                <div style="display:inline">Choose Environment : {{envName}}</div>
                <button class="btn btn-default" style="display:inline;float:right;margin-right:10px;margin-top: -4px;" ng-click="addEnvToTask()">Confirm</button>
            </div>
            <hr />
            <div dir-paginate="env in environmentList | orderBy:'-id' | itemsPerPage: 10 ">
                <div style="display:flex;flex-direction:row;justify-content:space-between;padding:8px;border-top: 1px solid #e9ecec;" ng-class="{deepColor: $index%2==0}">
                    <div> {{env.name}}</div>
                    <!--<button class="btn btn-default btn-sm" ng-click="gotoDetail('false',env.uuid)">detail</button>-->
                    <span class="glyphicon glyphicon-check" aria-hidden="true" ng-click="constructTestSuit(env.uuid,env.name)" ng-show="selectEnv==env.uuid"></span>
                    <span class="glyphicon glyphicon-unchecked" aria-hidden="true" ng-click="constructTestSuit(env.uuid,env.name)" ng-show="selectEnv!=env.uuid"></span>

                </div>
                <!--<hr style="margin-top:5px;margin-bottom:5px;" />-->
            </div>
            <center>
                <dir-pagination-controls></dir-pagination-controls>
            </center>

        </div>
        <div data-title="Content" bs-pane>
            <div style="margin-top:10px;">
                <button class="btn btn-default" ng-click="changeStatussourceFalse()">Modify Content</button>
                <button class="btn btn-default" ng-click="changeStatussourceTrue()">Modify Source</button>
                <div class="label-type" ng-show="taskDetailData.suite==false"> Test Case</div>
                <div class="label-type" ng-show="taskDetailData.suite==true"> Test Suite</div>
                <button class="btn btn-default" style="float:right" ng-disabled="sourceShow==null" ng-click="confirmToServer(contentInfo,taskDetailData.content)">Confirm</button>
            </div>


            <textarea ng-model="taskDetailData.content" ng-show="sourceShow==false" style="margin-top:5px;" spellcheck="false">


            </textarea>

            <div ng-show="sourceShow==true">
                <div style="display:flex;flex-direction:row">
                    <div style="margin-top:20px;">Source of Content</div>


                    <select ng-model="selectType" ng-change="triggerContent(selectType)" data-ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates">
                  <option value="">Choose...</option>
            </select>

                </div>

                <div style="margin-top:10px" ng-show="selectCase!=null ">
                    <div style="display:inline">Choose Source : {{selectCase}}</div>
                    <!--<button class="btn btn-default" style="display:inline;float:right;margin-right:10px;margin-top: -4px;" ng-click="confirmAddCaseOrSuite(contentInfo)">Confirm</button>-->
                    <button class="btn btn-default" style="display:inline;float:right;margin-right:10px;margin-top: -4px;" ng-click="getTestDeatil()">Edit</button>
                </div>
                <hr/>

                <div ng-show="displayTable==true">
                    <div ng-show="testcaselist.testcases.length!=0 && selectType.name=='Test Case'">
                        <div dir-paginate="test in testcaselist.testcases | itemsPerPage: 10" pagination-id="testcase">
                            <div style="display:flex;flex-direction:row;justify-content:space-between;padding:8px;border-top: 1px solid #e9ecec;" ng-class="{deepColor: $index%2==0}">
                                <div> {{test.Name}}</div>
                                <div style="font-size:10px;">{{test.Description}}</div>
                                <span class="glyphicon glyphicon-check" aria-hidden="true" ng-click="constructTestCase(test.Name)" ng-show="selectCase==test.Name"></span>
                                <span class="glyphicon glyphicon-unchecked" aria-hidden="true" ng-click="constructTestCase(test.Name)" ng-show="selectCase!=test.Name"></span>

                            </div>
                            <!--<hr style="margin-top:5px;margin-bottom:5px;" />-->
                        </div>
                        <center>
                            <dir-pagination-controls pagination-id="testcase"></dir-pagination-controls>
                        </center>
                    </div>

                    <div ng-show="testsuitlist.length!=0 && selectType.name=='Test Suite'">
                        <div dir-paginate="suite in testsuitlist | itemsPerPage: 10" pagination-id="testsuite">
                            <div style="display:flex;flex-direction:row;justify-content:space-between;padding:8px;border-top: 1px solid #e9ecec;" ng-class="{deepColor: $index%2==0}">
                                <div> {{suite}}</div>

                                <span class="glyphicon glyphicon-check" aria-hidden="true" ng-click="constructTestCase(suite)" ng-show="selectCase==suite"></span>
                                <span class="glyphicon glyphicon-unchecked" aria-hidden="true" ng-click="constructTestCase(suite)" ng-show="selectCase!=suite"></span>

                            </div>
                            <!--<hr style="margin-top:5px;margin-bottom:5px;" />-->
                        </div>
                        <center>
                            <dir-pagination-controls pagination-id="testsuite"></dir-pagination-controls>
                        </center>
                    </div>
                </div>

                <div ng-show="displayTable==false">
                    <textarea ng-model="contentInfo" spellcheck="false">
            </textarea>


                </div>
            </div>




        </div>
    </div>


</div>
<toaster-container></toaster-container>


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

    .deepColor {
        background-color: #f9f9f9;
    }

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

    textarea {
        width: 100%;
        height: 350px;
        border-radius: 5px;
        border: 1px solid #e8e8e8;
    }

    .label-type {
        display: inline;
        background-color: #2ecc71;
        color: #fff;
        border-radius: 5px;
        padding: 3px;
        font-size: 10px;
    }

    .content {
        height: auto;
    }
</style>