{% 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 active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Base64</a>
    </li>
    <li class="nav-item" role="presentation">
      <a class="nav-link" id="menu1-tab" data-bs-toggle="tab" href="#menu1" role="tab" aria-controls="menu1" aria-selected="false">URL 인코딩</a>
    </li>
    <li class="nav-item" role="presentation">
      <a class="nav-link" id="menu2-tab" data-bs-toggle="tab" href="#menu2" role="tab" aria-controls="menu2" aria-selected="false">HTML 인코딩</a>
    </li>
    <li class="nav-item" role="presentation">
      <a class="nav-link" id="menu3-tab" data-bs-toggle="tab" href="#menu3" role="tab" aria-controls="menu3" aria-selected="false">암호화</a>
    </li>
    <li class="nav-item" role="presentation">
      <a class="nav-link" id="menu4-tab" data-bs-toggle="tab" href="#menu4" role="tab" aria-controls="menu4" aria-selected="false">해시</a>
    </li>
  </ul>

  <!-- 탭 콘텐츠 -->
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
      <p>Base64 인코딩/디코딩 내용
        <form action="" method="POST">
		<input type="hidden" name="part" value="encoding">
            <fieldset>
				<input type="radio" name="convert_select" value="encode">인코딩
				<input type="radio" name="convert_select" value="decode">디코딩		
                <input type="text" id="inputText" name="inputText">
                <input type="submit" name="button" value="변환">
            </fieldset>
        </form>
        <hr>
        변환결과:<br>
		<div id="result">{{convert_result}}</div>

      </p>
    </div>
    <div class="tab-pane fade" id="menu1" role="tabpanel" aria-labelledby="menu1-tab">
      <p>URL 인코딩/디코딩 내용</p>
    </div>
    <div class="tab-pane fade" id="menu2" role="tabpanel" aria-labelledby="menu2-tab">
      <p>HTML 인코딩/디코딩 내용</p>
    </div>
    <div class="tab-pane fade" id="menu3" role="tabpanel" aria-labelledby="menu3-tab">
      <p>암호화 내용</p>
    </div>
    <div class="tab-pane fade" id="menu4" role="tabpanel" aria-labelledby="menu4-tab">
      <p>해시 내용</p>
    </div>
  </div>

</div>
{% endblock %}