<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><?=$title?> - <?=$GLOBALS['config']['name']?></title>
<meta name="description" content="A responsive web app template with common components like profile, list, tabs, menu views. Made for Codrops exclusively.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/assets/css/default.css">
</head>
<body class="bg-grey-lighter font-sans antialiased">
<!--[if lt IE 7]>
	<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="fixed bg-grey-lighter pin z-50 flex justify-center items-center" id="loading">
	<svg width="60px" height="60px" viewBox="0 0 60 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="morphing">
		<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
			<g transform="translate(-1178.000000, -87.000000)">
				<g transform="translate(1159.000000, 0.000000)">
					<g transform="translate(0.000000, 87.000000)">
						<g transform="translate(19.000000, 0.000000)">
							<circle id="small-circle" fill="#005CAF" cx="30" cy="30" r="30"></circle>
							<path id="moon" d="M30.5,49.7304688 C40.7172679,49.7304688 30.5,43.266096 30.5,33.0488281 C30.5,22.8315603 40.7172679,12 30.5,12 C20.2827321,12 11.0390625,20.6479665 11.0390625,30.8652344 C11.0390625,41.0825022 20.2827321,49.7304688 30.5,49.7304688 Z" fill="#A5DEE4"></path>
							<circle id="big-circle" fill="#0B346E" cx="31" cy="31" r="11"></circle>
						</g>
					</g>
				</g>
			</g>
		</g>
	</svg>
</div>
<div class="bg-indigo-darker text-center p-4 px-6 flex items-center">
	<div class="hidden lg:block lg:w-1/4 xl:w-1/5 pr-8">
		<a href="/" class="flex justify-start pl-6">
		<img src="/assets/img/logo.svg" class="" alt="logo">
	</a>
	</div>
	<div class="lg:hidden pr-3" id="mobile-nav-trigger">
		<div class="toggle p-2 block"><span></span></div>
	</div>
	<div class="flex flex-grow items-center lg:w-3/4 xl:w-4/5">
		<span class="relative w-full">
		    <form action="/search">
        		<input type="search" name="s" value="<?=$_GET['s'] ?? ''?>" placeholder="搜索书名" class="w-full text-sm text-white transition border border-transparent focus:outline-none focus:border-indigo placeholder-white rounded bg-indigo-medium py-1 px-2 pl-10 appearance-none leading-normal ds-input">
        	</form>
    		<div class="absolute search-icon" style="top: .5rem; left: .8rem;">
    		<svg class="fill-current pointer-events-none text-white w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
    			<path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"></path>
    		</svg>
    		</div>
    	</span>
<?php if (isset($_SESSION['user'])) { ?>
		<p class="text-sm text-right text-white py-2 px-3 hidden lg:block lg:w-1/3 px-6">
		    您好，<?=$_SESSION['user']['username']?> ！ [<a class="no-underline text-white hover:text-grey-dark" href="/user/do/logout" >注销</a>]
		</p>
<?php } else { ?>
		<p class="text-sm text-right text-white py-2 px-3 hidden lg:block lg:w-1/3 px-6">
		    您尚未 
		    <a class="no-underline text-white hover:text-grey-dark" href="/user/login" >登录</a> | 
		    <a class="no-underline text-white hover:text-grey-dark" href="/user/register" >注册</a>
		</p>
<?php } ?>
	</div>
</div>
<!-- Main -->
<div class="flex">
