<?php
require_once __DIR__ . '/auth.php';
$currentEditor = getCurrentEditor();
$isEditorLoggedIn = $currentEditor !== null;
?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta property="og:url"           content="https://bikesharingworldmap.com/" />
	<meta property="og:type"          content="website" />
	<meta property="og:title"         content="The Meddin Bike-sharing World Map" />
	<meta property="og:description"   content="Your description" />
	<meta property="og:image"         content="https://bikesharingworldmap.com/images/preview.jpg" />
    	<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
 	<title>The Meddin Bike-sharing World Map</title>

	<link rel="stylesheet" type="text/css" media="screen" href="style.css?t=<?php echo time(); ?>" />	
	<link rel="stylesheet" type="text/css" media="all" href="https://lib.oomap.co.uk/openlayers/v6.5.0-dist/ol.css" />	
	<link rel="stylesheet" type="text/css" media="all" href="https://lib.oomap.co.uk/jquery-ui-1.12.1/jquery-ui.css" />		
	<link rel="preconnect" href="https://fonts.gstatic.com">
	<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap" rel="stylesheet">

	<script type="text/javascript" src="lib/jquery-3.5.1.js"></script>	     
	<script type="text/javascript" src="https://lib.oomap.co.uk/jquery-ui-1.12.1/jquery-ui.js"></script>	     
    <script type="text/javascript" src="https://lib.oomap.co.uk/openlayers/v6.5.0-dist/ol.js"></script> 
	<script type="text/javascript" src="lookups.js?t=<?php echo time(); ?>"></script>
	<script type="text/javascript" src="main.js?t=<?php echo time(); ?>"></script>
	<script type="text/javascript">
		var editorSession = <?php echo json_encode(array('loggedIn' => $isEditorLoggedIn, 'editor' => $currentEditor)); ?>;
	</script>
	<!-- Google tag (gtag.js) -->
	<script async src="https://www.googletagmanager.com/gtag/js?id=G-JVC331L063"></script>
	<script>
	  window.dataLayer = window.dataLayer || [];
	  function gtag(){dataLayer.push(arguments);}
	  gtag('js', new Date());
	
	  gtag('config', 'G-JVC331L063');
	</script></head>
<body>
    <div id="mapcontainer"></div>
    <div id="legend">
   		<div id="title"><a href='index.php'>The Meddin Bike-sharing World Map</a></div>
		<?php if (!$isEditorLoggedIn) { ?>
	   	<div id="sponsor2"><a href="https://lyfturbansolutions.com/"><img src='images/lyfturbansolutions.png' /></a>
	   		<div>Kindly sponsored by<br /><a href="https://lyfturbansolutions.com/">Lyft Urban Solutions</a>.</div>
		</div>
		<?php } ?>
 		<div id="intro">
 		A map of the world's bikeshare services (<span title='Minimum hire is less than a day'>short-term</span> <span title='Traditional bicycles and Class 1 e-bikes'>bicycle</span> rentals available at a <span title='More than one docking station or other place you can get/leave bikes'>network</span> of <span title='Self-service - not bike shops'>unattended</span> locations).
 			<div id="bikecount"></div>
 		</div>
 		<div id="searchbox">
 			<div>Search for a city:</div>
			<span><label for="systemSearch"></label></span>
				<span><input id="systemSearch"  type='search'  /></span>
				<span><button type='button' id='buttonSearch'>&#128269;</button></span>
		</div>
		<div id='lastmod'></div>
		<div id='editorlogin'>
			<?php if ($isEditorLoggedIn) { ?>
				Hello, <?php echo htmlspecialchars($currentEditor['name'], ENT_QUOTES, 'UTF-8'); ?> - <a href='logout.php'>Sign Out</a>

				<div id='editingcontrols' style='<?php echo $isEditorLoggedIn ? 'display: block;' : 'display: none;'; ?>'>
					<div id='editingcontrolgroup'>
						<label for="addnewmode">Add New</label>
						<input type="radio" name="editmode" id="addnewmode" value='addnew'>	
						<label for="movemode" id="movemodelabel">Move</label>
						<input type="radio" name="editmode" id="movemode" value='move'>
						<label for="editmode">Edit</label>
						<input type="radio" name="editmode" id="editmode" value='edit' checked>
					</div>
					<div id='geocodebox' style='display: none;'>
						<div>Find a new city:</div>
						<span><input id="geocodeSearch" type='search' placeholder='City name' /></span>
						<ul id='geocodeResults'></ul>
					</div>
				</div>

				<?php } else { ?>
				<a href='login.php'>Editor login</a>
			<?php } ?>
		</div>
		<div id='reportlink'>
			<?php if (!$isEditorLoggedIn) { ?>
				<div><button id="popup-comments-missing">Tell us about a missing service</button></div>
			<?php } ?>

			<div id='mapdata' class='buttonset'>
				<input type='radio' id='thestatus' name='mapdata' value='status' checked="checked"><label for='thestatus'>Status</label>
				<input type='radio' id='theplatform' name='mapdata' value='platform' ><label for='theplatform'>Platform</label>
				<input type='radio' id='thepower' name='mapdata' value='power'><label for='thepower'>Power</label>
				<input type='radio' id='thedata' name='mapdata' value='data' ><label for='thedata'>Data</label>
			</div>
			<?php if (!$isEditorLoggedIn) { ?>
				<div style='margin-top: 10px; font-weight: bold;'><a href='/reports/bswm_2024report.pdf'>Our 2024 report</a></div><div style='font-size: 9px;'><a href='/reports/bswm_mid2021report.pdf'>2021</a> | <a href='/reports/bswm_mid2022report.pdf'>2022</a></div>
			<?php } ?>
		</div>
		
		<?php  
			echo "<script type='text/javascript'>";
			echo 'var systems =';
			include 'getsystems.php';
			echo ";";
			echo "</script>";
		?>
    </div>		

     <div id="popup-comments-dialog" title="Tell us">
		<div class='popup-comments-dialog-title' id='commentsupdate'>Tell us about any updates to this service or errors in the information shown about it here. We read all submissions, but please include your email address if you would like us to reply to you.</div>
		<div class='popup-comments-dialog-title' id='commentsmissing'>Tell us about a missing service (short-term bicycle/e-bike rentals available at a network of unattended locations). We read all submissions, but please include your email address if you would like us to reply to you.</div>
	  <form>
		<fieldset>
		  <p>
		  <p><label for="comments-name">Your Name</label><br />
		  <input type="text" maxlength="54" size="10"  name="commentsname" id="comments-name" value="" class="text ui-widget-content ui-corner-all" style='width:95%;'>
 		  </p>
		  <p><label for="comments-email">Email Address</label><br />
		  <input type="text" maxlength="54" size="10" name="commentsemail" id="comments-email" value="" class="text ui-widget-content ui-corner-all" style='width:95%;'>
 		  </p>
		  <p><label for="comments-text">Comments</label><br />
		  <textarea  rows="4" cols="50" maxlength="900" type="text" name="commentstext" id="comments-text" value="" class="text ui-widget-content ui-corner-all" style='width:95%;'></textarea>
		  </p>
		  <!-- Allow form submission with keyboard without duplicating the dialog button -->
		  <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
		</fieldset>
	  </form>     	     	
     </div>	

    <div id="popup" class="ol-popup">
      <a href="#" id="popup-closer" class="ol-popup-closer"></a>
      <div id="popup-image"></div>
      <div id="popup-status">
      	<div id="popup-status-text" class='nonedit'></div>
      	<div class='editbutton'>
			<select id='popup-edit-status' class='editbox'>
				<option></option>
			</select><span id="popup-id"></span>
		</div>
      </div>
      <div id="popup-info-container">
		  <div id="popup-title">
  			<div id="popup-place" class='nonedit'></div>
			<div class='editbutton'>
			  	<span><input type='text' id='popup-edit-city_place_en' class='editbox' style='width: 130px;' /></span> - 
			  	<span><input type='text' id='popup-edit-name_en' class='editbox' style='width: 130px;' /></span>
			</div>
			<div id="popup-suburb" class='nonedit'></div>     
			<div class='editbutton'>(Suburb: <span><input type='text' class='editbox' id='popup-edit-suburb_en' style='width: 200px;' ></span>)</div>
		  </div>

		  <div id="popup-type" class="nonedit"></div>
		  <div class="editbutton">
	  		Type: <select id="popup-edit-type" class="editbox">
		  		<option></option>
	  		</select>
		  </div>

		  <div id="popup-numbers" class='nonedit'></div>
		  <div class='editbutton'>
		  	<span><input type='text' id='popup-edit-bikes' class='editbox' style='width: 50px' /><img class='locked' src='images/locked.png'></span>  
		  	bikes including
		  	<span><input type='text' id='popup-edit-pedelec' class='editbox' style='width: 40px' /><img class='locked' src='images/locked.png'></span>  
		  	pedelecs<br /> and 
		 	<span><input type='text' id='popup-edit-cargo' class='editbox' style='width: 20px' /></span>
		  	cargo bikes, in
		   	<span><input type='text' id='popup-edit-stations' class='editbox' style='width: 30px' /><img class='locked' src='images/locked.png'></span>   
		   	stations/hubs.
		  </div>
		  
		  <div id="popup-graph">
		  </div>

		  <div id="popup-dates" class='nonedit'></div>
		  <div class='editbutton'>
		  	<div>
		  		<span></span>
		  		<input type='text' id='popup-edit-start_bike_date' class='editbox' style='width:100px'>
		  	</div>
		  	<div>
		  		Typical Hibernate Start Month: 
				<select id='popup-edit-hib_typstartmth' class='editbox'>
					<option></option>
				</select>
			</div>
		  	<div>
		  		Typical Hibernate End Month: 
				<select id='popup-edit-hib_typendmth' class='editbox'>
					<option></option>
				</select>
			</div>
		  	<div>
		  		<span></span>
		  		<input type='text' id='popup-edit-terminated_date' class='editbox' style='width:100px'>
			</div>
		  </div>

		  <div id="popup-platform" class="nonedit"></div>
		  <div class="editbutton">
		  	Platform: <select id='popup-edit-platform' class='editbox'>
				<option></option>
			</select>
		  </div>
		  <div id="popup-replaced_by" class="nonedit"></div>
		  <div class="editbutton">
		  	Replaced by: <span><input type='text' id='popup-edit-replaced_by' class='editbox' style='width: 130px;' /></span>
		  </div>
		  <div id="popup-operator" class="nonedit"></div>
		  <div class="editbutton">
		  	Operator: <span><input type='text' id='popup-edit-operator' class='editbox' style='width: 130px;' /></span>
		  </div>
		  <div id="popup-equipment" class="nonedit"></div>
		  <div class='editbutton'>
		  	Equipment: <span><input type='text' id='popup-edit-equipment' class='editbox' style='width: 130px;' /></span>
		  </div>
		  <div id="popup-photocredit"></div>
		  <div id="popup-replace"></div>
		  <div id="popup-url" class="nonedit"></div>
		  <div class="editbutton">
		  	Website: <span><input type='text' id='popup-edit-url' class='editbox' style='width: 230px;' /></span>
		  </div>
		  <div class="editbutton">
		  	BSM ID: <span><input type='text' id='popup-edit-bsm_id' class='editbox' style='width: 100px;' /></span>
		  </div>
		  
		  	<?php if (!$isEditorLoggedIn) { ?>
			  <button id="popup-comments">Tell us about updates and errors</button>
			<?php } ?>
		  <div id="popup-news">News Articles<div id="popup-news-text"></div><button id="popup-news-add" class='editbutton'>Add News</button></div>
		</div>
    </div>
    
    <div id="popup-news-add-dialog" title="Add news story">
	  <form>
		<fieldset>
		  <p><label for="type">Type</label>
		  <select id="news-add-type">
		  	<option>Plans</option>
		  	<option>Launch</option>
		  	<option>Change</option>
		  	<option>Numbers</option>
		  	<option>Closure</option>
		  	<option>Photos</option>		  	
		  </select>
		  </p><p><label for="news-add-datepicker">Date (yyyy-mm-dd)</label>
		  <input type="text" name="date" id="news-add-datepicker" class="text ui-widget-content ui-corner-all" style='width:100px;'>
		  </p><p><label for="text">Story Summary Text</label><br />
		  <textarea type="text" name="text" id="news-add-text" value="" class="text ui-widget-content ui-corner-all" style='width:95%;'></textarea>
		  </p><p><label for="url">Source URL (http://)</label><br />
		  <input type="text" name="url" id="news-add-url" value="" class="text ui-widget-content ui-corner-all" style='width:95%;'>
 	</p>
		  <!-- Allow form submission with keyboard without duplicating the dialog button -->
		  <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
		</fieldset>
	  </form>
	</div>
    
    <div id="mapkeywrapper">
    	<div class="mapkey" id="statusmapkey">
		</div>
		<div class="mapkey" id="platformmapkey" style='display: none;'>
    	</div>
		<div class="mapkey" id="powermapkey" style='display: none;'>
    	</div>
		<div class="mapkey" id="datamapkey" style='display: none;'>
    	</div>
    </div>
</body>
</html>
