<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
<script>
	const homelat = "<?php echo $latlng[0]; ?>";
	const homelon = "<?php echo $latlng[1]; ?>";
	const homegrid = "<?php echo $homegrid; ?>";
	var icon_home_url = "<?php echo $this->paths->cache_buster('/assets/images/dot.png'); ?>";
	var tileUrl = "<?php echo $this->optionslib->get_option('option_map_tile_server'); ?>";
</script>
<script type="text/javascript">
    var lang_gen_hamradio_gridsquares = '<?= _pgettext("Map Options", "Gridsquares"); ?>';
	let lang_gen_hamradio_upcoming_passes = '<?= "Upcoming satellite passes for"; ?>';
</script>

<style>
    .footprint--LEO {
      fill: rgba(255, 0, 0, 0.5);
      stroke: rgba(255, 0, 0, 0.5);
    }

    .footprint--MEO {
      fill: rgba(0, 255, 0, 0.5);
      stroke: rgba(0, 255, 0, 0.5);
    }

    .footprint--GEO {
      fill: rgba(0, 0, 255, 0.5);
      stroke: rgba(0, 0, 255, 0.5);
    }

  </style>
<div class="container px-3 px-lg-4 mt-3 mb-3">

	<h2><?php echo $page_title; ?></h2>

	<div class="card">
		<div class="card-header">
			<?= __("View a map with satellite flightpaths"); ?>
		</div>
		<div class="card-body">
			<?php if ($satellites) { ?>
				<form class="d-flex align-items-center">
					<label class="my-1 me-2" id="satslabel" for="distplot_sats"><?= __("Satellite"); ?></label>
					<select class="form-select my-1 me-sm-2 w-auto"  id="sats" onchange="plot_sat()">
						<?php foreach($satellites as $sat) {
							echo '<option value="' . ($sat->satname != null ? $sat->satname : $sat->displayname) . '"';
							if (($sat->displayname == $selsat) || ($sat->satname == $selsat)) { echo ' selected'; }
							echo '>' . ($sat->satname != null ? ($sat->satname.' ('.$sat->displayname.')') : $sat->displayname). '</option>'."\n";
						} ?>
					</select>
				</form>

			<?php } else { ?>
				<?= __("No satellites with TLE found. Please update via CRON or satellite page. If you have no access to do this, ask your admin!"); ?>
			<?php } ?>
		</div>
		<?php if ($satellites) { ?>
		<div id="satcontainer">
			<div id="sat_map" class="map-leaflet" style="width: 100%; height: 80vh"></div>
		</div>
			<?php } ?>
	</div>
</div>
