{% extends 'base.html' %}
{% block content %}
<div class="container-fluid">
<h1 class="mt-4">자격증</h1>
<p></p>
<hr>
  <!-- 탭 헤더 -->
  <ul class="nav nav-tabs" id="myTab" role="tablist">
  
    <li class="nav-item" role="presentation">
      <a class="nav-link {% if active_tab == 'home' %}active{% endif %}" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="{% if active_tab == 'home' %}true{% else %}false{% endif %}">디지털포렌식전문가2급</a>
    </li>
	
    <li class="nav-item" role="presentation">
      <a class="nav-link {% if active_tab == 'menu1' %}active{% endif %}" id="menu1-tab" data-bs-toggle="tab" href="#menu1" role="tab" aria-controls="menu1" aria-selected="{% if active_tab == 'menu1' %}true{% else %}false{% endif %}">CHFI</a>
    </li>
	
    <li class="nav-item" role="presentation">
      <a class="nav-link {% if active_tab == 'menu2' %}active{% endif %}" id="menu2-tab" data-bs-toggle="tab" href="#menu2" role="tab" aria-controls="menu2" aria-selected="{% if active_tab == 'menu2' %}true{% else %}false{% endif %}">ENCE</a>
    </li>	
	
    <li class="nav-item" role="presentation">
      <a class="nav-link {% if active_tab == 'menu3' %}active{% endif %}" id="menu3-tab" data-bs-toggle="tab" href="#menu3" role="tab" aria-controls="menu3" aria-selected="{% if active_tab == 'menu3' %}true{% else %}false{% endif %}">ACE</a>
    </li>		
  </ul>
  
  <!-- 탭 콘텐츠 -->
  <div class="tab-content" id="myTabContent">
  
    <!-- 디지털포렌식전문가2급 -->
    <div class="tab-pane fade {% if active_tab == 'home' %}show active{% endif %}" id="home" role="tabpanel" aria-labelledby="home-tab">
      <p class="mt-3">디지털포렌식전문가2급</p>
      
      <div class="row">
        <!-- 왼쪽: 문제 테이블 -->
        <div class="col-md-8">
          <h5>문제 목록</h5>
          <table class="table table-hover">
            <thead class="table-light">
              <tr>
                <th>번호</th>
                <th>구분</th>
                <th>문제</th>
                <th>보기</th>		
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>운영체제</td>
                <td>운영체제란?</td>
                <td>보기</td>		
              </tr>
              <tr>
                <td>2</td>
                <td>네트워크</td>
                <td>TCP/IP란?</td>
                <td>보기</td>		
              </tr>
              <tr>
                <td>3</td>
                <td>보안</td>
                <td>해시 함수란?</td>
                <td>보기</td>		
              </tr>
            </tbody>
          </table>
        </div>
        
        <!-- 오른쪽: 통계 테이블 -->
        <div class="col-md-4">
          <h5>문제 통계</h5>
          <table class="table table-bordered">
            <thead class="table-light">
              <tr>
                <th>구분</th>
                <th>문제 수</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>운영체제</td>
                <td>10</td>
              </tr>
              <tr>
                <td>네트워크</td>
                <td>8</td>
              </tr>
              <tr>
                <td>보안</td>
                <td>12</td>
              </tr>
              <tr class="table-primary">
                <td><strong>총합</strong></td>
                <td><strong>30</strong></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
	
    <!-- CHFI -->
    <div class="tab-pane fade {% if active_tab == 'menu1' %}show active{% endif %}" id="menu1" role="tabpanel" aria-labelledby="menu1-tab">
      <p>CHFI</p>
    </div>
  
    <!-- ENCE -->
    <div class="tab-pane fade {% if active_tab == 'menu2' %}show active{% endif %}" id="menu2" role="tabpanel" aria-labelledby="menu2-tab">
      <p>ENCE</p>
    </div> 
  
    <!-- ACE -->
    <div class="tab-pane fade {% if active_tab == 'menu3' %}show active{% endif %}" id="menu3" role="tabpanel" aria-labelledby="menu3-tab">
      <p>ACE</p>
    </div>   
  </div>
</div>
{% endblock %}