{% extends 'base.html
{% load static %}
{% block title %} {{ post.title }}{% endblock  %}
{% block content %}

  <!-- Start main-content -->
  <div class="main-content">

    <!-- Section: inner-header -->
    <section class="inner-header divider parallax layer-overlay overlay-dark-5" data-stellar-background-ratio="0.5" data-bg-img="{{ post.cover.url }}">
      <div class="container pt-100 pb-50">
        <!-- Section Content -->
        <div class="section-content pt-100">
          <div class="row"> 
            <div class="col-md-12">
              <h3 class="title text-white">Details</h3>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Section: Causes -->
    <section>
      <div class="container">
        <div class="row mtli-row-clearfix">
          <div class="col-sm-6 col-md-8 col-lg-8">
            <div class="causes bg-white maxwidth500 mb-30">
              <div class="thumb">
                <img src="{{ post.cover.url }}" alt="" class="img-fullwidth">
                <div class="overlay-donate-now">
                  <a href="" class="btn btn-dark btn-theme-colored btn-flat btn-sm pull-left mt-10">Donate <i class="flaticon-charity-make-a-donation font-16 ml-5"></i></a>
                </div>
              </div>
              <div class="progress-item mt-0">
                <div class="progress mb-0">
                  <div data-percent="84" class="progress-bar"><span class="percent">0</span></div>
                </div>
              </div>
              <div class="causes-details clearfix border-bottom p-15 pt-10 pb-10">
                <h3 class="font-weight-600"><a href="page-single-cause.html">{{ post.title }}</a></h3>
             
                {% comment %} <ul class="list-inline font-weight-600 border-top clearfix mt-20 pt-10">
                  <li class="pull-left pr-0">Raised: $1890</li>
                  <li class="text-theme-colored pull-right pr-0">Goal: $2500</li>
                </ul> {% endcomment %}
              </div>
            </div>
            <div class="event-details">
              <p class="mb-20 mt-20">{{ post.description }}</p>
              <div class="pull-left flip mr-15">
              
              </div>
              
            
            </div>
          </div>
          <div class="col-sm-6 col-md-4 col-lg-4">
            <div class="sidebar sidebar-right mt-sm-30">
             
              <div class="widget">
                <h4 class="widget-title line-bottom">Twitter Feed</h4>
                <a class="twitter-timeline" data-width="800" data-height="500" data-theme="light" href="https://twitter.com/enfants_meres?ref_src=twsrc%5Etfw">Tweets by enfants_meres</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
              </div>
              
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Section: Upcoming Events -->
    <section class="bg-lighter">
      <div class="container">
        <div class="section-content">
          <div class="row">
           
            <div class="col-md-7">
              <h3 class="text-uppercase title line-bottom mt-0 mb-30 mt-sm-40"><i class="fa fa-thumb-tack text-gray-darkgray mr-10"></i>Latest <span class="text-theme-colored">Causes</span></h3>
              <div class="owl-carousel-2col">
                {% for recent in recents %}
                <div class="item">
                  <div class="causes bg-white maxwidth500 mb-sm-30">
                    <div class="thumb">
                      <img src="{{ recent.cover.url }}" alt="" class="img-fullwidth">
                      <div class="overlay-donate-now">
                        <a href="" class="btn btn-dark btn-theme-colored btn-flat btn-sm pull-left mt-10">Donate <i class="flaticon-charity-make-a-donation font-16 ml-5"></i></a>
                      </div>
                    </div>
                    <div class="progress-item mt-0">
                      <div class="progress mb-0">
                        <div data-percent="84" class="progress-bar"><span class="percent">0</span></div>
                      </div>
                    </div>
                    <div class="causes-details clearfix border-bottom p-15 pt-10 pb-10">
                      <h5 class="font-weight-600 font-16"><a href="page-single-cause.html">{{ recent.title }}</a></h5>
                      <p>{{ recent.description|slice:":100"  }}</p>
                      {% comment %} <ul class="list-inline font-weight-600 border-top clearfix mt-20 pt-10">
                        <li class="pull-left pr-0">Raised: $1890</li>
                        <li class="text-theme-colored pull-right pr-0">Goal: $2500</li>
                      </ul> {% endcomment %}
                    </div>
                  </div>
                </div>
                {% endfor %}
                  
              
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- Divider: Clients -->
    <section class="clients bg-theme-colored">
      <div class="container pt-0 pb-0">
        <div class="row">
          <div class="col-md-12">
            <!-- Section: Clients -->
            <div class="owl-carousel-6col clients-logo transparent text-center">
              <div class="item"> <a href="#"><img src="static/images/logos/unnamed.png" alt=""></a></div>
              <div class="item"> <a href="#"><img src="static/images/logos/migeprodee.png" alt=""></a></div>
              <div class="item"> <a href="#"><img src="static/images/logos/AHF.jpeg" alt=""></a></div>
              <div class="item"> <a href="#"><img src="static/images/logos/gmo_logo.png" alt=""></a></div>
              <div class="item"> <a href="#"><img src="static/images/logos/pro_feme.png" alt=""></a></div>
              <div class="item"> <a href="#"><img src="static/images/logos/migeprodee.png" alt=""></a></div>
              <div class="item"> <a href="#"><img src="static/images/logos/feme.png" alt=""></a></div>
              <div class="item"> <a href="#"><img src="static/images/logos/mozeme.jpg" alt=""></a></div>

              <div class="item"> <a href="#"><img src="static/images/logos/wyca.jpg" alt=""></a></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
  <!-- end main-content -->

{% endblock  %}