{% extends "base_generic.html" %}
{% load fullurl %}
{% load tags %}
{% load static %}
{% block script %}
{% load email_obfuscator %}
<link href="{% static 'featherlight.min.css' %}" type="text/css" rel="stylesheet" />
<script src="{% static 'featherlight.min.js' %}" ></script>
<link href="{% static 'featherlight.gallery.min.css' %}" type="text/css" rel="stylesheet" />
<script src="{% static 'featherlight.gallery.min.js' %}" ></script>

<script>
	$(document).ready(function() {
		$('.gallery').featherlightGallery({
			previousIcon: '«',
			nextIcon: '»',
			galleryFadeIn: 250,
			openSpeed: 250,
		});
	});
</script>


{% endblock %}

{% block content %}


<style>
	.image-detail {

		margin: 40px 60px 40px 0px;
	}

	@media (min-width: 500px) {}
</style>

<!-- <hr style="color: black; background-color: black; margin-top: 0px; width: 130%; display: flex; margin-left: -20px; margin-right:20px "> -->

<div class="container " style="">
	<div class="row gemain-color">
		<div class="col-sm-3">
			<!-- --- -->
		</div>
		<div class="col-sm-6">
			<h2 class="titlepro" style="margin-top: 7px; font-weight: bold">{{ object.name }} </h2>
			<p class="lead kur"> {{ object.claim }}</p>
			<div class="image-detail" style="">
				<img href="{{object.media_set.first.image_big.url}}" src="{{  object.media_set.first.image_norm.url }}?v={{ object.media_set.first.pk }}" class="gallery img-fluid img-responsive" alt="" style="width: 100%;height: auto;vertical-align: middle;">
			</div>
			<br />
			<h5 class=" mediumkur">Kontakt</h5>
			<br />

			<p>{{ object.adresse }}{% if object.adresse_zusatz  %},	{{ object.adresse_zusatz }}{% endif %}{% if object.plz  %}, {{ object.plz }}{% endif %}{% if object.ort %}, {{ object.get_ort_display }}{% endif %}</p>

			<div class="row">
					<div class="col-sm-4">
						{% if object.email  %}<p>{{ object.email | obfuscate_mailto:'<i class="fas fa-envelope"></i> Email'  }}</p>{% endif %}

					</div>
					<div class="col-sm-8">
							{% if object.email  %}<p><a href="mailto:{{ object.email | obfuscate }}" >{{ object.email | obfuscate }}</a></p>{% endif %}

					</div>
			</div>

			<div class="row">
					<div class="col-sm-4">
						{% if object.website  %}<p><a href="{{  object.website }}" target="_blank" rel="noopener">Webseite</a></p>{% endif %}

					</div>
					<div class="col-sm-8">
						{% if object.website  %}<p><a href="{{  object.website }}" target="_blank" rel="noopener">{{  object.website }}</a></p>{% endif %}

					</div>
			</div>
			<br />
			<h5 class=" mediumkur">Steckbrief</h5>
			<br />
			<p>{{ object.kind_of_product }}, gegründet {{ object.gruendungsjahr }}{% if object.betriebgenommen  %}, in Betrieb genommen: {{ object.betriebgenommen }}{% endif %}.</p>
			<p><strong>Rechtsform</strong>: {{ object.rechtsform }}</p>
			<!-- XXX --> <p>{{ object.artmodell }}</p>
			<p>{% if object.orga  %}<strong>{% field_name object 'orga' %}</strong>: {{ object.orga }}{% endif %}</p>
			<!-- XXX --> <p>{% if object.eigentum  %}<strong>{% field_name object 'eigentum' %}</strong>: {{ object.get_eigentum_display }}{% endif %}</p>
			<!-- XXX -->  <p>{% if object.gprojekte  %}<strong>Gemeinschaftliche Projekte</strong>: {{ object.gprojekte }}{% endif %}</p>
			<p>{% if object.zielgruppen  %}<strong>Besondere Zielgruppen</strong>: {{ object.zielgruppen }}{% endif %}</p>
			<p>{% if object.freiraumangebote  %}<strong>Freiraumangebote</strong>: {{ object.freiraumangebote }}{% endif %}</p>
			<p>{% if object.oekologie  %}<strong>{% field_name object 'oekologie' %}</strong>: {{ object.oekologie }}{% endif %}</p>
			<p>{% if object.schwerpunkt  %}<strong>{% field_name object 'schwerpunkt' %}</strong>: {{ object.schwerpunkt }}{% endif %}</p>


		</div>
		<div class="col-sm-3">
		</div>
	</div>
</div>


<div class="container">
	<div class="row" style="margin-top: 10px">
		<div class="col-sm-6">

		</div>
		<div class="col-sm-4">
		</div>
	</div>
</div>

{% endblock %}
