	<?php ob_start(); 
	session_start();
	?>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="author" content="">
	<link rel="icon" href="../images/favicon.png">

	<title>Deadly Force::People killed by the police in Kenya</title>

	<!-- Bootstrap core CSS -->
	<link href="../css/bootstrap.css" rel="stylesheet">
	<!-- Bootstrap theme -->
	<link href="../css/bootswatch_min.css" rel="stylesheet">
	<link rel="stylesheet" href="../css/zebra_datepicker_default.css" type="text/css">

	<!-- Custom styles for this template -->
	<link href="../theme.css" rel="stylesheet">

	<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
	<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
	<script src="../../assets/js/ie-emulation-modes-warning.js"></script>

	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
	
	</head>

	<body role="document">

	<!-- Fixed navbar -->
	<div class="navbar navbar-default navbar-fixed-top" role="navigation">
	<div class="container">
	<div class="navbar-header">
	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
	<span class="sr-only">Toggle navigation</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	</button>
	<a class="navbar-brand" href="index.php">
	<img src="../images/newsplex_logo.png" width="145" height="70" alt="nation newsplex"/>
	<div class="header-slogan">
	<span class="big-slogan">Deadly force</span><br>
	<span class="slogan">People killed by the police in Kenya</span>
	</div>
	</a>
	</div>
	<div class="navbar-collapse collapse">
	<ul class="nav navbar-nav">
	<li><a href="../tip.php">Submit tip</a></li>
	<li><a href="../index.php#database">Database</a></li>
	<li><a href="../about.php">About</a></li>
	<li><a href="../articles.php">Read articles</a></li>
	</ul>
	</li>
	</ul>
	</div><!--/.nav-collapse -->
	</div>
	</div>

	<div class="container main"> 

	<div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">                    
	<div class="panel panel-info" >
	<div class="panel-heading">
	<div class="panel-title">Sign In</div>
	<!--<div style="float:right; font-size: 80%; position: relative; top:-10px"><a href="#">Forgot password?</a></div>-->
	</div>     

	<div style="padding-top:30px" class="panel-body" >

	<div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>

	<form id="loginform" class="form-horizontal" method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>">
	<?php
	if(isset($_POST['login']))
	{ 
	$servername = "localhost";
	$dbuser = "root";
	$dbpass = "root";
	$dbname = "deadly_force";
	try {
	$handler = new PDO("mysql:host=$servername;dbname=$dbname", $dbuser, $dbpass);
	$handler->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
	} catch (PDOException $e){
	exit($e->getMessage());
	}
	
	$username = trim($_POST['login-username']); 
	$password = trim($_POST['login-password']);

	

	//validate for empty fields
	if (empty($username) || empty($password)){
	echo "<div class=\"bs-component\">";
	echo "<div class=\"alert alert-dismissable alert-danger\">";
	echo "<button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>";
	echo "<strong>You have to input a username and password.</strong>";
	echo "</div>";
	echo "</div>";
	exit();
	}
	//clean up
	$username = str_replace("'","''",$username);
	$password = md5($password);
	
	//$username = mysql_real_escape_string($username); 
	//$password = mysql_real_escape_string($password); 

	$result = $handler->prepare("select password  from police_killings_users where username = :name");
	$result->bindParam(':name', $username);
	$result->execute();
	//no username found
	if($result->rowCount() ==0){
	echo "<div class=\"bs-component\">";
	echo "<div class=\"alert alert-dismissable alert-warning\">";
	echo "<button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>";
	echo "<strong>Username not found in the database!.</strong>";
	echo "</div>";
	echo "</div>";
	exit();
	} 
	while ($row = $result->fetch(PDO::FETCH_ASSOC))
	{
	$dbpass = $row['password'];
	// Validate that password is correct
	if($password == $row['password']){
	$_SESSION['loggedin'] = true;
	$_SESSION['username'] = $username;

	//get loggedinuser names
	$result = $handler->prepare("select names  from police_killings_users where username = :name");
	$result->bindParam(':name', $username);
	$result->execute();
	while ($row = $result->fetch(PDO::FETCH_ASSOC))
	{
	$loggedinuser = $row['names'];
	$_SESSION['loggedinuser'] = $loggedinuser;
	}
	header('Location: cpanel.php');	
	}
	else{
	echo "<div class=\"bs-component\">";
	echo "<div class=\"alert alert-dismissable alert-danger\">";
	echo "<button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>";
	echo "<strong>Password does not match the one in the database.</strong>";
	echo "</div>";
	echo "</div>";
	exit();
	}
	}
	}
   ?>

	<div style="margin-bottom: 25px" class="input-group">
	<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
	<input id="login-username" type="text" class="form-control" name="login-username" value="" placeholder="username" required>                                        
	</div>

	<div style="margin-bottom: 25px" class="input-group">
	<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
	<input id="login-password" type="password" class="form-control" name="login-password" placeholder="password" required>
	</div>
	<div style="margin-top:10px" class="form-group">
	<!-- Button -->

	<div class="col-sm-12 controls">
	<input type="submit" name="login" id="login" class="btn btn-success" value="Sign In &raquo;"/>
    </div>
	</div>
    <div class="form-group">
	<div class="col-md-12 control">
	<div style="border-top: 1px solid#888; padding-top:15px; font-size:85%" >
	Don't have an account! 
	<!--<a href="#" onClick="$('#loginbox').hide(); $('#signupbox').show()">
	Sign Up Here
	</a>-->
	Contact your editor
	</div>
	</div>
	</div>    
	</form>     
    </div>                     
	</div>  
	</div>
	<div id="signupbox" style="display:none; margin-top:50px" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
	<div class="panel panel-info">
	<div class="panel-heading">
	<div class="panel-title">Sign Up</div>
	<div style="float:right; font-size: 85%; position: relative; top:-10px"><a id="signinlink" href="#" onclick="$('#signupbox').hide(); $('#loginbox').show()">Sign In</a></div>
	</div>  
	<div class="panel-body" >
	<form id="signupform" class="form-horizontal" role="form">

	<div id="signupalert" style="display:none" class="alert alert-danger">
	<p>Error:</p>
	<span></span>
	</div>



	<div class="form-group">
	<label for="email" class="col-md-3 control-label">Email</label>
	<div class="col-md-9">
	<input type="text" class="form-control" name="email" placeholder="Email Address">
	</div>
	</div>

	<div class="form-group">
	<label for="firstname" class="col-md-3 control-label">First Name</label>
	<div class="col-md-9">
	<input type="text" class="form-control" name="firstname" placeholder="First Name">
	</div>
	</div>
	<div class="form-group">
	<label for="lastname" class="col-md-3 control-label">Last Name</label>
	<div class="col-md-9">
	<input type="text" class="form-control" name="lastname" placeholder="Last Name">
	</div>
	</div>
	<div class="form-group">
	<label for="password" class="col-md-3 control-label">Password</label>
	<div class="col-md-9">
	<input type="password" class="form-control" name="passwd" placeholder="Password">
	</div>
	</div>

	<div class="form-group">
	<label for="icode" class="col-md-3 control-label">Invitation Code</label>
	<div class="col-md-9">
	<input type="text" class="form-control" name="icode" placeholder="">
	</div>
	</div>

	<div class="form-group">
	<!-- Button -->                                        
	<div class="col-md-offset-3 col-md-9">
	<button id="btn-signup" type="button" class="btn btn-info"><i class="icon-hand-right"></i> &nbsp Sign Up</button>
	<span style="margin-left:8px;">or</span>  
	</div>
	</div>

	<div style="border-top: 1px solid #999; padding-top:20px"  class="form-group">

	<div class="col-md-offset-3 col-md-9">
	<button id="btn-fbsignup" type="button" class="btn btn-primary"><i class="icon-facebook"></i>Contact your editor</button>
	</div>                                           

	</div>
    </form>
	</div>
	</div>
     </div> 
	</div>
    <!-- Bootstrap core JavaScript
	================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="../js/jquery.min.js"></script>
	<script src="../js/bootstrap.min.js"></script>
	<script src="../js/bootswatch.js"></script>
	<script type="text/javascript" src="../js/zebra_datepicker.js"></script>
	<script src="../js/docs.min.js"></script>
	<script>
	$(document).ready(function() {
     // assuming the controls you want to attach the plugin to 
    // have the "datepicker" class set
    $('input.datepicker').Zebra_DatePicker();

 });
	</script>
	<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
	<script src="../js/ie10-viewport-bug-workaround.js"></script>
	</body>
	</html>
