<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
	layout:decorate="~{admin/layout/layout}" th:with="title='',active='home'">
<th:block layout:fragment="html_head">
	<script>
		$(document).ready(function () {
			$('ul.tabs li').click(function () {
				var tab_id = $(this).attr('data-tab');
				$('ul.tabs li').removeClass('current');
				$('.tab-content').removeClass('current');
				$(this).addClass('current');
				$("#" + tab_id).addClass('current');
			})
		})
	</script>
	<style>
		.table .body .table-responsive {
			padding: 20px;
		}

		.table .head {
			display: block;
		}

		.apisetBox p {
			padding: 5px 0;
			position: relative;
			text-indent: 10px;
		}

		.apisetBox p::before {
			content: "";
			width: 4px;
			height: 4px;
			border-radius: 50%;
			background: #80caff;
			position: absolute;
			top: 50%;
			transform: translateY(-60%);
			left: 0;
			display: inline-block;
		}

		ul.tabs {
			margin: 0px;
			padding: 0px;
			list-style: none;
		}

		ul.fixTab {
			margin: 0px;
			padding: 0px;
			list-style: none;
		}

		ul.tabs li {
			background: none;
			color: #222;
			display: inline-block;
			padding: 10px 15px;
			cursor: pointer;
			font-size: 14px;
		}

		ul.fixTab li {
			background: none;
			color: #222;
			display: inline-block;
			padding: 10px 20px;
			cursor: pointer;
			font-size: 14px;
		}

		ul.tabs li.current {
			background: #e8f2ff;
			color: #222;
			border-radius: 10px 10px 0 0;
			font-size: 14px;
		}

		ul.fixTab li {
			background: #e8f2ff;
			color: #222;
			border-radius: 10px 10px 0 0;
			font-size: 14px;
		}

		.tab-content {
			display: none;
			background: #e8f2ff;
			padding: 15px;
			font-size: 14px;
		}

		.fix-content {
			background: #e8f2ff;
			padding: 15px 20px;
			font-size: 14px;
		}

		.tab-content.current {
			display: inherit;
		}

		.table-responsive select {
			width: 100%;
			font-size: 14px;
		}

		select option[value=""][disabled] {
			display: none;
		}

		.table .saveBtnArea {
			padding: 0;
		}

		.table-responsive a.blBtn {
			display: block;
			text-align: center;
		}
	</style>
</th:block>
<th:block layout:fragment="content">
	<div class="container-fluid">
		<div class="page-name">
			<h1>에볼루션 상세내역 </h1>
		</div>
		<div class="table">
			<div class="head">
				<h6>https://</h6>
				<div class="apisetBox">
					<p>게임 목록을 받아옵니다.</p>
				</div>
			</div>
			<div class="body bodyflex">
				<div class="table-responsive">
					<ul class="fixTab">
						<li>전송테스트</li>
					</ul>
					<div class="fix-content">
						<div class="inputTxt">
							<input type="text" placeholder="거래코드를 입력해주세요" onfocus="this.placeholder=''"
								onblur="this.placeholder='거래코드를 입력해주세요'">
						</div>
						<div class="saveBtnArea">
							<a class="blBtn" href="">실행</a>
						</div>
					</div>
				</div>
				<div class="table-responsive">
					<ul class="tabs">
						<li class="tab-link current" data-tab="data-1">응답값 설명</li>
						<li class="tab-link" data-tab="data-2">PHP</li>
						<li class="tab-link" data-tab="data-3">ASP</li>
						<li class="tab-link" data-tab="data-4">JAVA</li>
						<li class="tab-link" data-tab="data-5">Node.js</li>
					</ul>
					<div class="tab-content current" id="data-1">
						<div class="apiCodeArea">
							<code>
								<p> "code": 1, </p>
							</code>
						</div>
					</div>
					<div class="tab-content" id="data-2">
						<div class="apiCodeArea">
							<code>
								<p> "code": 2, </p>
							</code>
						</div>
					</div>
					<div class="tab-content" id="data-3">
						<div class="apiCodeArea">
							<code>
								<p> "code": 3, </p>
							</code>
						</div>
					</div>
					<div class="tab-content" id="data-4">
						<div class="apiCodeArea">
							<code>
								<p> "code": 4, </p>
							</code>
						</div>
					</div>
					<div class="tab-content" id="data-5">
						<div class="apiCodeArea">
							<code>
								<p> "code": 5, </p>
							</code>
						</div>
					</div>
				</div>
			</div>
			<div class="body topline">
				<div class="table-responsive" style="width:auto;">
					<ul class="fixTab">
						<li>수신 데이터</li>
					</ul>
					<div class="fix-content">
						<div class="apiCodeArea">
							<code>
								<p>실행을 누르시면 실제 데이터가 수신 후 표시됩니다.</p>
							</code>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div><!-- container-fluid -->
</th:block>