{% extends 'index.html' %}
 {% load static %}

 {% block content %}

<div class="offer-detail-wrapper">
	<div class='offer-detail-row'>
		<div class='offer-detail-content'>
			<div class='offer-detail-stauts'>
				  {% if offer.status != 'Active'%}
				  <span class='offer-detail-status-info'> OFERTA NIEAKTYWNA </span>
				  {% endif %}
			</div>
			<div class='offer-detail-title'>
				<span class='offer-detail-title-text'> {{offer.title}} </span> 
			</div>

			<div class='offer-detail-images'>
				<div class='offer-detail-images-img-thumbnail'>
				{% if offer.images.all %}
					{% for photo in offer.images.all %}
						{% if photo.main_image == True%}
							<img src="{{ photo.image.url }}" width = 600px>
						{% endif %}
					{% endfor %}
				{%endif%}
				</div>
				<div class='offer-detail-images-gallery'>
				{% if offer.images.all %}
					{% for photo in offer.images.all %}
						<img src="{{ photo.image.url }}" width = 300px>
					{% endfor %}
				{% endif %}
				</div>			

				<div class='offer-detail-description'> 
					<span class='offer-detail-description-text'> {{offer.description}} </span>
				</div>

				<div class='offer-detail-parameters'> 
					<ul class="list-group">
						<li class="list-group-item">    'DMC' <b> {{offer.DMC}} </b> </li>
						<li class="list-group-item">    'Places_to_sleep' <b> {{offer.Places_to_sleep}} </b></li>
						<li class="list-group-item">    'cooker'  <b> {{offer.cooker}} </b></li>
						<li class="list-group-item">    'fridge' <b> {{offer.fridge}} </b></li>
						<li class="list-group-item">    'microwave' <b> {{offer.microwave}} </b></li>
						<li class="list-group-item">    'Webasto' <b> {{offer.Webasto}} </b></li>
						<li class="list-group-item">    'auto_temp_control' <b> {{offer.auto_temp_control}} </b></li>
						<li class="list-group-item">    'water_level_indicator' <b> {{offer.water_level_indicator}} </b> </li>
						<li class="list-group-item">    'battery_level'<b> {{offer.battery_level}} </b> </li>
						<li class="list-group-item">    'photovoltaic_panels' <b> {{offer.photovoltaic_panels}} </b> </li>
						<li class="list-group-item">    'gearbox <b> {{offer.gearbox}} </b> </li>
						<li class="list-group-item">    'tempomat' <b> {{offer.tempomat}} </b> </li>
					</ul>
				</div>
				<div class ='offer-detail-price'> KOSZT: {{offer.price}} PLN / dzień</div>
			</div>
		</div>
		<div class='offer-reservation'>
		     <form id="form-container" method="POST" class="reservation-form">
			<h3> Zarezerwuj kamper </h3>
				{% csrf_token %}
				{{ form.media }}
				{{form.as_p}}
				<button style="background-color:black; color:white" class="btn btn-outline-info" type="submit">Wyślij zapytanie</button>
			</form>
		<div> 
		
		</div>

		</div>
	</div>
</div>


 {% endblock content %}