@extends('frontend.master')
@section('content')
<style>
body{
   position: relative; /* required */
}
.flex-column{
    position: sticky; /* Supported in latest version of Chrome, Firefox, Safari, Opera and Edge browsers */
    top: 15px;
}
</style>
<div class="container">
    <div id="docsGeo">
        <div class="row" style="margin-top: 20px;">
            <div class="col-sm-3" id="myScrollspy">
				<ul class="nav nav-pills flex-column">
					<li class="nav-item">
						<a class="nav-link" href="#item-1">{{ __('messages.docs_overview') }}</a>
					</li>
					<div class="image-doc">
						<img src='/frontend/images/img_overview.png' style='max-width:100%;'/>
					</div>
                </ul>
            </div>
            <div class="col-sm-9">
            <div data-spy="scroll" data-target="#navbar-example3" data-offset="0">
                <h1 id="item-1">Radar API — {{ __('messages.docs_overview') }}</h1>
				<p>{{ __('messages.docs_summary') }}</p>
                <div>
					<h2>{{ __('messages.docs_example') }}:</h2>
					<pre>{{url ("/")}}/widget/<b>YOUR_API_KEY</b>?lat=25.031&lng=105.852&overlay=temp&metricTemp=c&zoom=5</pre>
					<p>{{ __('messages.docs_explain') }}: latitude=25.031, longitude=105.852, layer=Temperature, Temperature unit=°C, layer_unit=°C, zoom=5</p>
					<pre>{{url ("/")}}/widget/<b>YOUR_API_KEY</b>?lat=25.031&lng=105.852&overlay=rain&metricTemp=c&metricRain=mm&zoom=5</pre>
					<p>{{ __('messages.docs_explain') }}: latitude=25.031, longitude=105.852, layer=Rain, Temperature unit=°C, Rain unit=mm, zoom=5</p>
					
					<h2>{{ __('messages.docs_parameters') }}</h2>
					<ul class='list-docs'>
						<li>
							<b>key</b> <span class='parameter_optional'>{{ __('messages.docs_required') }}</span>
							<div>{{ __('messages.docs_key_detail') }}</div>
						</li>
						<li>
							<b>latitude</b> <span class='parameter_optional'>{{ __('messages.docs_required') }}</span>
							<div>{{ __('messages.docs_latitude_detail') }}</div>
						</li>
						<li>
							<b>longitude</b> <span class='parameter_optional'>{{ __('messages.docs_required') }}</span>
							<div>{{ __('messages.docs_longitude_details') }}</div>
						</li>
						<li>
							<b>overlay</b> <span class='parameter_optional'>{{ __('messages.docs_required') }}</span>
							<div>{{ __('messages.docs_all_layers_are') }}: <span>temp</span>, <span>rain</span>, <span>snow</span>, <span>wind</span>, <span>pressure</span>, <span>humidity</span> or <span>clouds</span></div>
						</li>
						<li>
							<b>metricTemp</b> <span class='parameter_optional'>{{ __('messages.docs_optional') }}</span>
							<div>{{ __('messages.docs_all_layers_are') }}: <span>c</span> or <span>f</span></div>
						</li>
						<li>
							<b>metricRain</b> <span class='parameter_optional'>{{ __('messages.docs_optional') }}</span>
							<div>{{ __('messages.docs_all_layers_are') }}: <span>mm</span> or <span>in</span></div>
						</li>
						<li>
							<b>metricSnow</b> <span class='parameter_optional'>{{ __('messages.docs_optional') }}</span>
							<div>{{ __('messages.docs_all_layers_are') }}: <span>cm</span> or <span>in</span></div>
						</li>
						<li>
							<b>metricWind</b> <span class='parameter_optional'>{{ __('messages.docs_optional') }}</span>
							<div>{{ __('messages.docs_all_layers_are') }}: <span>kmh</span>, <span>kt</span>, <span>bft</span>, <span>ms</span> or <span>mh</span></div>
						</li>
						<li>
							<b>metricPressure</b> <span class='parameter_optional'>{{ __('messages.docs_optional') }}</span>
							<div>{{ __('messages.docs_all_layers_are') }}: <span>hpa</span>,  <span>inhg</span> or <span>mmhg</span></div>
						</li>
						<li>
							<b>metricHumidity</b> <span class='parameter_optional'>{{ __('messages.docs_optional') }}</span>
							<div>{{ __('messages.docs_the_only_value') }}: <span>percent</span></div>
						</li>
						<li>
							<b>metricClouds</b> <span class='parameter_optional'>{{ __('messages.docs_optional') }}</span>
							<div>{{ __('messages.docs_all_layers_are') }}: <span>mm</span> or <span>in</span></div>
						</li>
						<li>
							<b>zoom</b> <span class='parameter_optional'>{{ __('messages.docs_optional') }}</span>
							<div>{{ __('messages.docs_min_zoom') }} <span>3</span>, {{ __('messages.docs_max_zoom') }} <span>11</span></div>
						</li>
					</ul>
				</div>
			</div>
        </div>
    </div>
</div>
<style>
	.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
		color: #007bff !important;
		background-color: transparent;
		border-left: 3px solid #007bff !important;
	}
    .image-doc{
        width: 100%;
        height: 285px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
    #myScrollspy li a{
        border-left: 3px solid #d8d2d2;
		color: #212529;
		font-weight:bold;
    }
    #myScrollspy .nav-pills .nav-link {
        border-radius: 0px;
    }
	
	h3{font-size: 1.0rem;}
	.section_title{font-size: 1.2rem;}
	.question_box {
		display: block;
		background: #007bff;
		color: white;
		padding: 10px;
		border-radius: 3px;
	}
	pre{
		font-size: 0.85em;
		font-weight: inherit;
		line-height: inherit;
		background: #F5F5F5;
		border: 1px solid #d6d6d6;
		border-radius: 0.2em;
		white-space: pre-wrap;
		margin-top: 15px;
		padding: 10px;
		line-height: 1.5em;
	}
	ul.list-docs{padding: 0px;margin: 20px;list-style: none;}
	ul.list-docs li{padding-bottom:25px;}
	ul.list-docs li > div{
		padding-top:10px;
	}
	ul.list-docs li > div > span{
		font-weight: inherit;
		line-height: inherit;
		background: #F5F5F5;
		padding: 0px 10px 3px 10px;
		border: 1px solid #d6d6d6;
		border-radius: 0.2em;
		margin-bottom: 4px;
		display: inline-block;
	}
	.parameter_optional {color: #8899A6;}
	
</style>
@endsection