<div class="card">
	<div class="card-header">
		<strong class="m-0 float-right d-block border p-1">
			{{ vars.ip }}</strong>

		<ul class="nav nav-pills card-header-pills mr-auto">
			<li class="nav-item">
				<a class="nav-link active" data-toggle="tab" role="tab" href="#tabIpInfoGeneral">
					{{ strings.nav_general }}
				</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" data-toggle="tab" role="tab" href="#tabIpInfoSessions">
					{{ strings.nav_sessions }}
				</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" data-toggle="tab" role="tab" href="#tabIpInfoAudit">
					{{ strings.nav_audit }}
				</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" data-toggle="tab" role="tab" href="#tabIpInfoTraffic">
					{{ strings.nav_traffic }}
				</a>
			</li>
		</ul>
	</div>
	<div class="card-body">

		<div class="tab-content">
			<div class="tab-pane show active" id="tabIpInfoGeneral" role="tabpanel" aria-labelledby="tabIpInfoGeneral">
				{{ content.general|raw }}
			</div>
			<div class="tab-pane" id="tabIpInfoSessions" role="tabpanel" aria-labelledby="tabIpInfoSessions">
				{{ content.sessions|raw }}
			</div>
			<div class="tab-pane" id="tabIpInfoAudit" role="tabpanel" aria-labelledby="tabIpInfoAudit">
				{{ content.audit_trail|raw }}
			</div>
			<div class="tab-pane" id="tabIpInfoTraffic" role="tabpanel" aria-labelledby="tabIpInfoTraffic">
				{{ content.traffic|raw }}
			</div>
		</div>
	</div>
</div>