<div class="content-wrapper" ng-if="!myAccess.masterAdd && !myAccess.masterEdit && !myAccess.masterDelete ">
    <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> Warning!</h5>
                    Unauthorised Access.
                </div>
            </div>
        </div>
    </div>
</div>

<div class="content-wrapper" class="modal-demo" ng-if="myAccess.masterAdd || myAccess.masterEdit || myAccess.masterDelete">
    <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> Manage {{page.name | titlecase}} {{page.type}}
                    </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 text-blue">{{page.name|capitalize}}</li>
                        <li class="breadcrumb-item active">{{page.type}}</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" ng-if="page.name=='skill'">
                                <label for="skillsgroup">Skill Group</label>
                                <select id="skillsgroup" class="form-control custom-select"
                                        ng-model="data.skillsgroup" ng-options="sg.skillgroupid as sg.sg_name for sg in skillsgroups">
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="name">{{page.name | titlecase}} Name</label>
                                <input type="text" id="name" class="form-control" ng-model="data.name" placeholder="{{page.name | titlecase}} Name">
                            </div>
                            <div class="form-group">
                                <label for="description">{{page.name | titlecase}} Description</label>
                                <textarea id="description" class="form-control" rows="2" ng-model="data.desc" placeholder="{{page.name | titlecase}} Description"></textarea>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <button type="button" class="btn btn-danger" ng-click="reset()"><i class="fas fa-times"></i> Reset</button>
                                    <button type="button" class="btn btn-success float-right" ng-click="add(data)"><i class="fas fa-save"></i> {{page.type | titlecase}} {{page.name | titlecase}}</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>{{page.name|titlecase}} Details</h5>
                                <div class="table-responsive">
                                    <table id="masterList" class="table table-bordered table-sm">
                                        <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Skill Group</th>
                                            <th>Action</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr ng-repeat="dl in dataList">
                                            <td>{{dl.name}}</td>
                                            <td>{{dl.skillgroupname}}</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" class="btn btn-xs bg-cyan" ng-click="delete(dl)"><i class="fas fa-trash " title="Delete"></i></button>
                                                </div>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <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>{{page.name|titlecase}} Details</h5>
                            <div class="table-responsive">
                                <table id="masterList2" class="table table-bordered table-sm">
                                    <thead>
                                    <tr>
                                        <th>Department</th>
                                        <th>Hero Count</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr ng-repeat="dl in deptCounter">
                                        <td>{{dl.emp_department}}</td>
                                        <td>{{dl.hero_count}}</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="modal fade" id="modal-default">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <p>Are you sure to leave this page!</p>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="goToSelf('dashboard',{})">Proceed</button>
                </div>
            </div>
        </div>
    </div>
</div>
