{% extends "base_with_jumbo.html" %}
{% load bootstrap3 %}
{% load compress %}
{% load i18n %}
{% load leaflet_tags %}
{% load humanize %}

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	  <script src="bundle.js"></script>
	</head>
{% block content %}
    <div class="container-fluid">
			<div class="row" style="background-color: #e3f3fd;">
				<div class="col-lg-8 border-top-0">
					<button class="btn btn-info" style="margin:15px 0;padding-left:20px;left:-10px;position:absolute;" onclick="window.history.back()" role="button"><i class="fa fa-arrow-left" aria-hidden="true"></i> {% trans "Back to Map" %}</button>
					<div style="margin-top:70px;padding:0 20px;">
					  <h1>{{case_study.entry_name}}</h1>
					  <p>{{case_study.synopsis}}</p>
					</div>
					<div class="clearfix">
						<div style="margin-left:20px;">
						  	<span class="label label-default">{{case_study.get_sector_of_economy_display}}</span>
							{% if case_study.positive_or_negative == "P" %}
							<span class="label label-success">{{case_study.get_positive_or_negative_display}}</span>
							{% elif case_study.positive_or_negative == "N"%}
							<span class="label label-danger">{{case_study.get_positive_or_negative_display}}</span>
							{% endif %}
							<span class="label label-info">{{case_study.country.name}}</span>
  						</br>
     					<small class="text-muted">Created {{case_study.date_created|naturaltime}} by <i>{{case_study.author}}</i></small>
					  </div>
						<a class="btn btn-primary btn-lg float-right" href="#" role="button">Get Involved</a>
					</div>
				</div>
        <div class="col-lg-4">
					<div class="embed-responsive embed-responsive-16by9">
						<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/{{case_study.get_video_id}}?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
					</div>
				</div>
      </div>
			<div class="row" style="padding-top:30px;">
				<div class="col-lg-8">
		      <div id="accordion" role="tablist">
            <div class="card">
              <div class="card-header" role="tab" id="headingOne">
                <h5 class="mb-0">
                  <a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    {% trans "Full Description" %}
                  </a>
                </h5>
              </div>

              <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
                <div class="card-body">
                  {{case_study.full_description}}
                </div>
              </div>
            </div>
            <div class="card">
              <div class="card-header" role="tab" id="headingTwo">
                <h5 class="mb-0">
                  <a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                    {% trans "Community Voices" %}
                  </a>
                </h5>
              </div>
              <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion">
                <div class="card-body">
                  {{case_study.community_voices}}
                </div>
              </div>
            </div>
          </div>
				</div>
				<div class="col-lg-4">
					<div class="card">
						<div class="card-header">
							{% trans "Factbar" %}
						</div>
						<div class="card-body">
							<ul class="list-group list-group-flush">
								{% if case_study.area_of_land %}
    								<li class="list-group-item">{% trans "Approximate land area"%}: {{case_study.area_of_land}} kmĀ²</li>
								{% endif %}
  							</ul>
						</div>
					</div>
					<div class="card">
						<div class="card-header">
						  Attached Files
						</div>
						<ul class="list-group list-group-flush">
							<li class="list-group-item">
							  <a href="#">File One</a></br>
					  		<small class="text-muted">Uploaded one month ago</small>
							</li>
							<li class="list-group-item">
					  		<a href="#">File Two</a></br>
							  <small class="text-muted">Uploaded 3 mins ago</small>
					  	</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<footer class="footer text-center">
		  <div class="container-fluid">
				<span class="text-muted">Ojuso x Yansa</span>
			</div>
		</footer>
{% endblock %}
</html>