<div class="content-wrapper" ng-if="!myAccess.watchlistMaster">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6 offset-sm-1 offset-md-2 offset-lg-3 mt-5">
                <div class="alert alert-warning alert-dismissible">
                    <h5><i class="icon fas fa-ban"></i> 	!</h5>
                    Unauthorised Access.
                </div>
            </div>
        </div>
    </div>
</div>

<div class="content-wrapper" class="modal-demo" ng-if="myAccess.watchlistMaster">
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="text-{{page.color}}">
                        <go-back/>
                        <i class="fas {{page.icon}}"></i> WatchList
                    </h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a ng-href="{{baseurl}}/dashboard">Home</a></li>
                       <!-- <li class="breadcrumb-item"><a target="_blank" href="watchlists/heroes">Heroes Watchlist</a></li>-->
                        <li class="breadcrumb-item text-blue">WatchList</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>
    <section class="content">
        <div class="row">
            <div class="col-md-6">
                <div class="card card-outline card-success sticky-top top-100">
                    <div class="card-body" id="formCard">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label for="name">WatchList Tag</label>
                                <select id="wtl_id" class="form-control custom-select"
                                            ng-model="data.wtl_id" ng-options="l.wtl_id as (l.tag | capitalize) for l in tagOptions" >
                                 </select>
                            </div>
							<div class="form-group" id="tag_dropdown">
                                <label for="name">Hero</label>
							   <!--  <select id="hero_id" class="form-control custom-select"
                                            ng-model="data.hero_id" ng-options="l.id as (l.emp_first_name+' '+l.emp_last_name) for l in managerOptions" >
                                 </select>-->
								 
								<ui-select multiple ng-model="data.hero_id" theme="bootstrap" class="form-control col-sm-12 border-left-0 p-0" close-on-select="false">
                        <ui-select-match placeholder="Select Heroes...">
                            <small title="{{$item.emp_email+' '+$item.emp_code}}" ng-bind-html="$item.emp_first_name+' '+(!$item.emp_middle_name || $item.emp_middle_name === 'null' ? '' : $item.emp_middle_name)+' '+$item.emp_last_name"></small>
                        </ui-select-match>
                        <ui-select-choices repeat="g.id as g in managerOptions | filter: $select.search | orderBy:'emp_first_name'">
                            <div>
                                <strong ng-bind-html="g.emp_first_name+' '+(!g.emp_middle_name || g.emp_middle_name === 'null' ? '' : g.emp_middle_name)+' '+g.emp_last_name  | highlight: $select.search"></strong>
                                <span ng-bind-html="' ('+ g.emp_code+')'  | highlight: $select.search"></span>
                                &lt;<span ng-bind-html="''+ g.emp_email+''  | highlight: $select.search"></span>&gt;
                            </div>
                        </ui-select-choices>
                    </ui-select>
								 {{}}
                            </div>
							<div class="form-group">
                                <label for="name">Comment</label>
                                <textarea type="text" id="comment" class="form-control" ng-model="data.comment" placeholder="Comment" ></textarea>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <button type="button" class="btn btn-success float-right" ng-click="add(data)"><i class="fas fa-save"></i> Add</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card card-outline card-success">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12 col-md-12 col-lg-12">
                                <h5>List</h5>
                                <div class="table-responsive">
                                    <table id="masterList" class="table table-bordered table-sm">
                                        <thead>
                                        <tr>
                                            <th>WatchList Tag</th>
                                            <th>Hero</th>
                                            <!--<th>Comment</th>-->
                                            <th>Action</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr ng-repeat="dl in dataList">
                                            <td><strong>{{dl.tag|capitalize}}</strong></td>
                                            <td><strong><a target="_blank" href="{{'/heroes/feedback/'+dl.hero_id}}">{{dl.emp_first_name | capitalize}} {{dl.emp_last_name | capitalize}}</a></strong></td>
                                            <!--<td><strong>{{dl.comment|capitalize}}</strong></td>-->
                                            <td>
                                                <div class="btn-group btn-group-sm">
                                                    <!-- <button type="button" class="btn btn-xs bg-cyan" ng-click="edit(dl)"><i class="fas fa-pen-square" title="Edit"></i></button> -->
                                                    <button type="button" ng-if="dl.status=='1'" class="btn btn-xs bg-success" ng-click="delete(dl)"><i class="fas fa-tag" title="Untag"></i> Untag</button>

                                                    <button type="button" ng-if="dl.status=='0'" class="btn btn-xs bg-danger" ng-click="edit(dl)"><i class="fas fa-tag" title="Tag"></i> Tag</button>
                                                </div>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
