<h4>Create Task</h4>
<hr/>
<div>
    <div style="display:inline">Name <input type="text" ng-model="name" style="width:200px" /></div>
    <button style="display:inline" class="btn btn-default" ng-disabled="name==null || name==''" ng-click="createTask(name)" ng-show="newUUID==null">Create</button>
</div>
<hr/>

<div bs-tabs ng-show="newUUID!=null">
    <div data-title="Environment" bs-pane>
        <div style="margin-top:10px" ng-show="displayEnvName!=null">
            <div style="display:inline">Choose Environment : {{displayEnvName}}</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="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 style="text-align:center;margin-top:20px;">
    <button class="btn btn-default" ng-click="closeThisDialog()" ng-disabled="newUUID===null || ifHasEnv!=true || (ifHasCase!=true && ifHasSuite!=true)">Close</button>
    <button class="btn btn-default" ng-disabled="newUUID===null || ifHasEnv!=true || (ifHasCase!=true && ifHasSuite!=true)" ng-click="runAtask(newUUID)">Run</button>
</div>


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

    .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: 400px;
        border-radius: 5px;
        border: 1px solid #e8e8e8;
    }

    .deepColor {
        background-color: #f9f9f9;
    }
</style>