<div class="card card-primary card-outline">
    <div class="card-header">
        <h4 class="float-left">Skill Browser</h4>
        <button type="button" class="btn btn-warning float-right text-white" data-toggle="modal" data-target="#modal-default">
          <i class="fa fa-clipboard"></i> Check Skills
      </button>
    </div>
    <div class="card-body">
     
      <div class="row">
        <div class="col-5 col-sm-3">
          <div class="nav flex-column nav-tabs h-100" id="vert-tabs-tab" role="tablist" aria-orientation="vertical">
            {% for group in groups %}
            <a class="nav-link" id="vert-tabs-unread-tab" data-toggle="pill" href="#vert-tabs-{{group | cut:' ' | lower}}" role="tab" aria-controls="vert-tabs-unread" aria-selected="false">{{group}}</a>
            {% endfor %}
          </div>
        </div>
        <div class="col-7 col-sm-9">
          <div class="tab-content" id="vert-tabs-tabContent">
            {% for group in groups %}
            <div class="skill-pane tab-pane" id="vert-tabs-{{group | cut:' ' | lower}}">
            {% include 'django_eveonline_connector/adminlte/characters/components/skill_table.html' %}
            </div>
            {% endfor %}
          </div>
        </div>
      </div>

    </div>
    <!-- /.card -->
  </div>

  <div class="modal fade" id="modal-default" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Paste Skills</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                <button id="checkSkillButton" type="button" class="btn btn-primary">Check Skills</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
