<div class="content-wrapper">
  <section class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1 class="text-warning">
            <go-back />
            <i class="fas fa-users"></i> {{btn.text}}
          </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 active">{{btn.text}}</li>
          </ol>
        </div>
      </div>
    </div>
    <!-- /.container-fluid -->
  </section>

  <!-- Main content -->
  <section class="content">
    <div class="row">
      <div class="col-md-12">
        <div class="card card-warning card-outline">
          <div class="card-body">
            <div class="row">
              <div class="col-sm-12 col-lg-8 offset-lg-2">
                <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>Experience Years</h5>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-sm-12 col-lg-6">
                        <div class="form-group">
                          <label for="emp_yoe">Total Years of Experience</label>
                          <input
                            ng-model="exp.emp_yoe"
                            type="number"
                            min="0"
                            max="60"
                            id="emp_yoe"
                            class="form-control"
                            placeholder="Years of Experience"
                          />
                        </div>
                      </div>
                      <div class="col-sm-12 col-lg-6">
                        <div class="form-group">
                          <label for="emp_yoe"
                            >Relevant Years of Experience</label
                          >
                          <input
                            ng-model="exp.emp_relevant_yoe"
                            type="number"
                            min="0"
                            max="60"
                            id="relevant_emp_yoe"
                            class="form-control"
                            placeholder="Years of Experience"
                          />
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-sm-12 col-lg-6 offset-lg-3">
                        <div class="form-group">
                          <button
                            type="submit"
                            ng-click="updateExperience()"
                            class="btn btn-success"
                          >
                            <i class="fas fa-edit"></i>Update My Experience
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="col-sm-12 col-lg-8 offset-lg-2"
                ng-if="editSkillsEnable"
              >
                <div class="card card-outline card-success">
                  <div class="card-body">
                    <div class="row">
                      <div class="col-4"></div>
                      <div class="col-4">
                        <strong>Select Skill Group</strong>
                        <select
                          id="emp_lm"
                          class="form-control custom-select"
                          ng-model="selSklGroup"
                          ng-options="skl.skl_grp_id as skl.skillgroupname for skl in sklGroupList  | unique:'skl_grp_id'"
                          ng-change="filterSklGroup(selSklGroup)"
                        ></select>
                      </div>

                      <div class="col-12 col-md-12 col-lg-12">
                        <h5>Edit My Skills</h5>
                        <div class="table-responsive">
                          <table id="masterList" class="table table-bordered">
                            <thead>
                              <tr>
                                <th>Skill Name</th>
                                <th>Skill Group</th>
                                <th>Experience Level</th>
                                <th>Experience (Months)</th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr ng-repeat="dl in skillList">
                                <td class="text-bold">{{dl.name}}</td>
                                <td class="text-bold">{{dl.skillgroupname}}</td>
                                <td>
                                  <div class="form-group">
                                    <select
                                      id="emp_lm"
                                      class="form-control custom-select"
                                      ng-model="dl.skill_experience_level"
                                      ng-options="explvl.explvlid as explvl.explvltext for explvl in experienceLevelOptions"
                                    ></select>
                                  </div>
                                </td>
                                <td>
                                  <div class="form-group">
                                    <input
                                      ng-model="dl.skill_experience_months"
                                      type="number"
                                      min="0"
                                      max="300"
                                      id="emp_yoe"
                                      class="form-control"
                                      placeholder="Months of Experience"
                                    />
                                  </div>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="col-sm-12 col-lg-8 offset-lg-2"
                ng-if="!editSkillsEnable"
              >
                <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>My Skills</h5>
                        <div class="table-responsive">
                          <table id="myskills" class="table table-bordered">
                            <thead>
                              <tr>
                                <th>Skill Name</th>
                                <th>Skill Group</th>
                                <th>Experience Level</th>
                                <th>Experience (Months)</th>
                                <th>Updated Date</th>
                                <th>Action</th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr ng-repeat="dl in oldSkills">
                                <td class="text-bold">{{dl.name}}</td>
                                <td class="text-bold">{{dl.skillgroupname}}</td>
                                <td class="text-bold">
                                  {{dl.skill_experience_level}}
                                </td>
                                <td class="text-bold">
                                  {{dl.skill_experience_months}}
                                </td>
                                <td class="text-bold">
                                  {{dl.updated_skill | datetz:'DD-MMM-YYYY'}}
                                </td>
                                <td>
                                  <span
                                    class="btn badge badge-danger"
                                    ng-click="removeMyskill(dl.employeeskillid)"
                                    >Remove</span
                                  >
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-sm-12 col-lg-2" ng-if="!editSkillsEnable">
                <button
                  type="submit"
                  ng-click="editSkillsEnableChange()"
                  class="btn btn-success fixed-center-vertically"
                >
                  <i class="fas fa-edit"></i>Edit My Skills
                </button>
              </div>
              <div class="col-sm-12 col-lg-2" ng-if="editSkillsEnable">
                <button
                  type="submit"
                  ng-click="save()"
                  class="btn btn-success fixed-center-vertically"
                >
                  <i class="fas fa-save"></i>
                  {{btn.text}}
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12" ng-if="editSkillsEnable">
        <button
          type="button"
          class="btn btn-danger"
          data-toggle="modal"
          data-target="#modal-default"
        >
          Cancel
        </button>
        <button
          type="submit"
          ng-click="save()"
          class="btn btn-success float-right"
        >
          <i class="fas fa-save"></i>
          {{btn.text}}
        </button>
      </div>
      <div class="col-12" ng-if="!editSkillsEnable">
        <button
          type="submit"
          ng-click="editSkillsEnableChange()"
          class="btn btn-success float-right"
        >
          <i class="fas fa-edit"></i>Edit My Skills
        </button>
      </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="goTo($event,'heroList')"
          >
            Proceed
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
