@page "/"
@using System.Net.Http.Headers
@using System.Text.Json
@using Newtonsoft.Json
@using Telerik.Blazor
@using Telerik.Blazor.Components
@using Telerik.SvgIcons
@using Telerik.FontIcons

@inject NavigationManager NavManager

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
	<link href="https://blazor.cdn.telerik.com/blazor/6.0.2/kendo-font-icons/font-icons.css" rel="stylesheet" type="text/css" />
	<script src="https://blazor.cdn.telerik.com/blazor/6.0.2/telerik-blazor.min.js" defer></script>
	<script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js"></script>

	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<meta http-equiv="x-ua-compatible" content="IE=edge">
	<meta name="author" content="SemiColonWeb">
	<meta name="description" content="Create New &amp; Used Car Sale Websites with Canvas Template. Get Canvas to build powerful websites easily with the Highly Customizable &amp; Best Selling Bootstrap Template, today.">
	<!-- Document Title
	============================================= -->
	<title>Dealers - Car | Canvas</title>
	<TelerikButton OnClick="@SayHelloHandler" ThemeColor="primary">Say Hello</TelerikButton>

	<br />

	@helloString

	@code {
	   MarkupString helloString;

	   void SayHelloHandler()
	   {
		   string msg = string.Format("Hello from <strong>Telerik Blazor</strong> at {0}.<br /> Now you can use C# to write front-end!", DateTime.Now);
		   helloString = new MarkupString(msg);
	   }
	}
	<style>

		.dropdown-toggle::after {
			margin-left: 0.255em;
		}

		.dark .irs-bar {
			background-color: #CCC
		}

		.dark .irs-grid-text {
			color: #EEE
		}

		.slide-caption {
			position: absolute;
			opacity: 0;
			max-width: none !important;
			-webkit-transition: opacity .4s .4s, transform .4s .4s ease-in-out;
			-o-transition: opacity .4s .4s, transform .4s .4s ease-in-out;
			transition: opacity .4s .4s, transform .4s .4s ease-in-out;
			-webkit-transform: translateY(50px);
			-ms-transform: translateY(50px);
			-o-transform: translateY(50px);
			transform: translateY(50px);
		}

		.flex-viewport {
			height: 100% !important;
		}

		.slide-caption.slider-caption-bottom {
			padding: 20px;
			width: 100%;
			min-width: 100%;
			height: auto !important;
			left: 0;
			top: auto;
			bottom: 0;
		}

			.slide-caption.slider-caption-bottom p {
				margin-bottom: 0;
				font-size: 15px;
			}

		.slide.flex-active-slide .slide-caption {
			opacity: 1;
			-webkit-transform: translateY(0);
			-ms-transform: translateY(0);
			-o-transform: translateY(0);
			transform: translateY(0);
		}

		.slide .slide-caption.card {
			width: auto !important;
			height: auto !important;
			top: 20px;
			font-size: 18px;
			-webkit-transform: translateY(0);
			-ms-transform: translateY(0);
			-o-transform: translateY(0);
			transform: translateY(0);
			-webkit-transition: opacity .4s .6s;
			-o-transition: opacity .4s .6s;
			transition: opacity .4s .6s;
		}

	</style>

</head>

<body class="stretched side-push-panel" data-loader-html="<div><img src='demos/car/images/page-loader.gif' alt='Loader'></div>">

	<!-- Side Panel Overlay -->
	<div class="body-overlay"></div>

	<!-- Side Panel -->
	<div id="side-panel">

		<div id="side-panel-trigger-close" class="side-panel-trigger"><a href="#"><i class="bi-x-lg"></i></a></div>

		<div class="side-panel-wrap">

			<div class="widget">

				<a href="index.html"><img src="demos/car/images/logo@2x.png" alt="Canvas Logo" height="50"></a>

				<p>It has always been, and will always be, about quality. We're passionate about ethically sourcing the finest coffee beans, roasting them with great care. We'd like to hear your message!</p>

				<div class="widget quick-contact-widget form-widget border-0 pt-0">

					<h4>Quick Contact</h4>
					<div class="form-result"></div>
					<form id="quick-contact-form" name="quick-contact-form" action="include/form.php" method="post" class="quick-contact-form mb-0">
						<div class="form-process">
							<div class="css3-spinner">
								<div class="css3-spinner-scaler"></div>
							</div>
						</div>
						<input type="text" class="required form-control mb-2" id="quick-contact-form-name" name="quick-contact-form-name" value="" placeholder="Full Name">
						<input type="text" class="required form-control email mb-2" id="quick-contact-form-email" name="quick-contact-form-email" value="" placeholder="Email Address">
						<textarea class="required form-control mb-2 short-textarea" id="quick-contact-form-message" name="quick-contact-form-message" rows="4" cols="30" placeholder="Message"></textarea>
						<input type="text" class="d-none" id="quick-contact-form-botcheck" name="quick-contact-form-botcheck" value="">
						<input type="hidden" name="prefix" value="quick-contact-form-">
						<button type="submit" id="quick-contact-form-submit" name="quick-contact-form-submit" class="button button-small button-3d m-0" value="submit">Send Email</button>
					</form>

				</div>


			</div>

		</div>

	</div>

	<!-- Document Wrapper
	============================================= -->
	<div id="wrapper">

		<!-- Slider
		============================================= -->
		<div id="slider" class="slider-element h-auto">
			<div class="slider-inner">
				<div class="row align-items-stretch flex-md-row-reverse mx-0">
					<div class="col-md-8 col-sm-12 px-0 min-vh-40">
						<TelerikMap @ref="@MapRef" Zoom="@Zoom" Height="@MapHeight" Center="[40.68, 74.04]" OnMarkerClick="@OnMarkerClick">
							<MapLayers>
								<MapLayer Type="@MapLayersType.Tile"
											Attribution="@Attribution"
											Subdomains="@Subdomains"
											UrlTemplate="@UrlTemplate">
								</MapLayer>
								<MapLayer Type="@MapLayersType.Marker"
											Data="@MapMarkers"
											LocationField="@nameof(MarkerModel.LatLng)"
											TitleField="@nameof(MarkerModel.Title)">
								</MapLayer>
							</MapLayers>
						</TelerikMap>
					</div>

					<div class="col-md-4 col-sm-12 px-0">
						<div class="card bg-color rounded-0 shadow-sm p-4 h-100" style="background-color: #6aa84f">
							<div class="card-body">
								<h3 class="text-white">Find Your Shop:</h3>
								<form action="#" class="mb-0">
									<div class="row">
										<div class="col-12 mt-3">
											<label class="text-white" for="template-contactform-date">Shop Name</label>
											<input @bind="@ShopName" name="template-contactform-date" class="form-control text-start">
											<label class="mt-3 text-white" for="template-contactform-date">City, State, ZIP</label>
											<input @bind=CSZ type="text" class="form-control text-start" name="template-contactform-end">
										</div>

										<div class="col-12 mt-3 dark input-daterange travel-date-group">
											<label class="text-white">Price Range</label>
											<input class="price-range">
										</div>
										<div class="col-12 mt-4">
											<button @onclick="SubmitLocation" class="button button-3d button-rounded button-white button-light button-large w-100 m-0">Submit</button>
										</div>
									</div>
								</form>
							</div>
						</div>
					</div> <!-- Shop info pane-->

					<div style="width: 1500px">
						<TelerikWindow Modal="true"
										@bind-Visible="@isVisible"
										CloseOnOverlayClick="true"
										Width="600px"
										Height="300px">
							<WindowTitle>
								@CurrentSelection
							</WindowTitle>
							<WindowContent>
								@CurrentBlurb
								<br /><br /><br />
								<TelerikButton OnClick="@VisitClickHandler" Class="visit-button">
									Visit Page
									<style>
										.visit-button {
											position: absolute;
											top: 75%;
											left: 50%;
											-ms-transform: translate(-50%, -50%);
											transform: translate(-50%, -50%);
											margin: 0;
										}
									</style>
								</TelerikButton>

								@code {
	public void VisitClickHandler()
	{
		Console.WriteLine("Visiting page" + CurrentSelection);
		string destination = "/info/" + CurrentSelection;
		NavManager.NavigateTo(destination);

	}
								}
							</WindowContent>
							<WindowActions>
								<WindowAction Name="Close" />
							</WindowActions>
						</TelerikWindow>
					</div>
				</div>
			</div>
		</div>

		<!-- Content
		============================================= -->
		<section id="content">

			<div class="content-wrap py-0">

				<div class="section m-0">
					<div class="container">
						<div class="row py-5">
							<div class="col-md-4 mb-md-3 mb-5">
								<div class="feature-box fbox-plain">
									<div class="fbox-icon">
										<a href="#"><i class="icon-car-battery"></i></a>
									</div>
									<div class="fbox-content">
										<h3>Long Battery Life</h3>
										<p>Canvas provides support for Native HTML5 Videos that can be added to a Background.</p>
									</div>
								</div>
							</div>
							<div class="col-md-4 mb-md-3 mb-5">
								<div class="feature-box fbox-plain">
									<div class="fbox-icon">
										<a href="#"><i class="icon-car-cogs2"></i></a>
									</div>
									<div class="fbox-content">
										<h3>24x7 Service</h3>
										<p>Complete control on each &amp; every element that provides endless customization.</p>
									</div>
								</div>
							</div>
							<div class="col-md-4 mb-md-3 mb-5">
								<div class="feature-box fbox-plain">
									<div class="fbox-icon">
										<a href="#"><i class="icon-car-pump"></i></a>
									</div>
									<div class="fbox-content">
										<h3>Petrol, Diesel &amp; LPG</h3>
										<p>Change your Website's Primary Scheme instantly by simply adding the dark class.</p>
									</div>
								</div>
							</div>
							<div class="col-md-4 mt-0 mt-md-5">
								<div class="feature-box fbox-plain">
									<div class="fbox-icon">
										<a href="#"><i class="icon-car-meter"></i></a>
									</div>
									<div class="fbox-content">
										<h3>Powerful Dashboard</h3>
										<p>Canvas provides support for Native HTML5 Videos that can be added to a Background.</p>
									</div>
								</div>
							</div>
							<div class="col-md-4 mt-5">
								<div class="feature-box fbox-plain">
									<div class="fbox-icon">
										<a href="#"><i class="icon-car-paint"></i></a>
									</div>
									<div class="fbox-content">
										<h3>Differnt Color Options</h3>
										<p>Complete control on each &amp; every element that provides endless customization.</p>
									</div>
								</div>
							</div>
							<div class="col-md-4 mt-5">
								<div class="feature-box fbox-plain">
									<div class="fbox-icon">
										<a href="#"><i class="icon-car-wheel"></i></a>
									</div>
									<div class="fbox-content">
										<h3>All wheel Drive</h3>
										<p>Change your Website's Primary Scheme instantly by simply adding the dark class.</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<hr style="width:85%; margin:auto; border-color:#1b380d; color:#1b380d; height:3px" />
				<br />


				<div class="section m-0">
					<div class="container">
						<div class="heading-block mb-4 text-center">
							<h2>Popular Cars</h2>
						</div>

						<!-- Portfolio Items
						============================================= -->
						<div id="portfolio" class="portfolio row gutter-20 col-mb-30">
						</div>

					</div>
				</div>

			</div>
		</section><!-- #content end -->
		<!-- Footer
		============================================= -->
		<footer id="footer" class="dark border-0" style="background-color: #080808;">
			<div class="container-fluid px-5">
				<!-- Footer Widgets
				============================================= -->
				<div class="footer-widgets-wrap">

					<div class="row col-mb-50 justify-content-between">
						<div class="col-lg-7">

							<div class="row col-mb-30">
								<div class="col-6 col-lg-3">
									<div class="widget widget_links widget-li-noicon">
										<h4>Hire</h4>
										<ul>
											<li><a href="#">Documentation</a></li>
											<li><a href="#">Feedback</a></li>
											<li><a href="#">Plugins</a></li>
										</ul>
									</div>
								</div>
								<div class="col-6 col-lg-3">
									<div class="widget widget_links widget-li-noicon">
										<h4>Community</h4>
										<ul>
											<li><a href="#">Documentation</a></li>
											<li><a href="#">Feedback</a></li>
											<li><a href="#">Plugins</a></li>
											<li><a href="#">Support Forums</a></li>
										</ul>
									</div>
								</div>
								<div class="col-6 col-lg-3">
									<div class="widget widget_links widget-li-noicon">
										<h4>Learn</h4>
										<ul>
											<li><a href="#">Documentation</a></li>
											<li><a href="#">Feedback</a></li>
											<li><a href="#">Plugins</a></li>
										</ul>
									</div>
								</div>
								<div class="col-6 col-lg-3">
									<div class="widget widget_links widget-li-noicon">
										<h4>About</h4>
										<ul>
											<li><a href="#">Documentation</a></li>
											<li><a href="#">Feedback</a></li>
											<li><a href="#">Plugins</a></li>
										</ul>
									</div>
								</div>
							</div>

						</div>

						<div class="col-lg-5 text-center text-lg-end">
							<img src="demos/car/images/logo-footer.png" alt="Image" height="50">
							<br>
							<div style="color: #444">
								<span>&copy; Canvas Automotive. All Rights Reserved.</span>
								<div class="clear"></div>
								<p style="margin-top: 10px;">Objectively restore standards compliant opportunities whereas one-to-one collaboration and idea-sharing.</p>
							</div>
						</div>
					</div>
				</div><!-- .footer-widgets-wrap end -->
			</div>
		</footer><!-- #footer end -->

	</div><!-- #wrapper end -->
	<!-- Go To Top
	============================================= -->
	<div id="gotoTop" class="uil uil-angle-up"></div>

	<!-- Contact Button
	============================================= -->
	<div id="contact-me" class="bi-envelope side-panel-trigger bg-color"></div>




</body>
</html>
