{% extends 'base.html.twig' %}

{% block title %}Hello DefaultController!{% endblock %}

{% block body %}

        
  <div class="uk-container uk-container-center">
  <br><br><br>
  <div class="uk-slidenav-position">
                                <ul class="uk-grid uk-slideset uk-grid-width-1-1 uk-grid-width-large-1-2 uk-grid-width-medium-1-2 uk-grid-width-small-1-1">
                                    <li class="uk-active" style="">
                                        <div class="uk-panel">
                                            <p>
                                                <span class="circle-border">
                                                
                                                <img src="{{ asset('build/images/'~ user.picture) }}" class="attachment-thumbnail wp-post-image" alt="img_testim_001" height="164" width="164">
                                            </span>
                                            </p>
                                            <h3 class="uk-panel-header">
                                                <span class="brackets">
                                                <a href="">{{ user.fullName }}  {{ user.username }}</a>
                                            </span>
                                            </h3>
                                            
                                        </div>
                                    </li>
                                    
                                </ul>
                                
                            </div>
    <div class="uk-grid" data-uk-grid-match data-uk-grid-margin>
        <div class="tm-main uk-width-medium-1-1 tm-middle">
            <main class="tm-content">
                <section>
                
                    <div id="primary" class="site-content">
                    <div class="buttons">
                        <a href="#" onclick="toggleVisibility('content');">Video</a> | 
                        <a href="#" onclick="toggleVisibility('content1');">Audio</a> | 
                        </div>
                        <div id="content" role="main">
                            <h2>Video</h2>
                            <ul class="tm-category-posts-list">
                                {% for post in post.resultS %}
                                <a href="{{ path('blog_post', {'slug': post.slug}) }}"></a>
                                <li class="tm-post-list-block clearfix" style="padding: 20px; border-radius: 30px;">
                                    <div class="flleft" style="margin-right: 20px; border-radius: 30px;">
                                        <img width="164" height="164" src="//img.youtube.com/vi/{{ post.summary[32 :] }}/0.jpg"class="attachment-thumbnail wp-post-image" alt="img_pastors_003" /> </div>
                                    <div class="">
                                        <h3 class="tm-panel-header"><a href="{{ path('blog_post', {'slug': post.slug}) }}">{{post.title}}</a></h3>
                                        <div class="tm-grey-color">
                                            
                                        </div>
                                        <div class="line"></div>
                                        <div>Vestibulum metus libero, feugiat nec arcu in, tristique placerat erat. Curabitur ornare turpis et ex vehicula, id porttitor dolor tempor. Cras suscipit commodo est vel dapibus. Fusce imperdiet nisi et&hellip;</div>
                                        <a href="#" class="read-more"></a>
                                    </div>
                                </li>
                                {% endfor %}  
                            </ul>
                            
                        </div>
                        <!-- #content -->
                    </div>
                    <div id="primary" class="site-content">
                     <div id="content1" role="main" style="display: none;">
                        <h2>Podcast</h2>
                            <ul class="tm-category-posts-list">
                                {% for postaudio in post_audio.resultS %}
                                <li class="tm-post-list-block clearfix" style="padding: 20px; border-radius: 30px;">
                                    <div class="flleft" style="margin-right: 20px; border-radius: 30px;">
                                      <img src="{{ asset('build/images/sound.jpg') }}" class="attachment-thumbnail wp-post-image" alt="img_testim_001" height="64" width="64">
                                           
                                        <div class="">
                                        <h3 class="tm-panel-header"><a href="{{ path('blog_podcast', {'slug': postaudio.slug}) }}">{{ postaudio.title}}</a></h3>
                                        <div class="tm-grey-color">
                                            
                                        </div>
                                        <div class="line"></div>
                                        <div>Vestibulum metus libero, feugiat nec arcu in, tristique placerat erat. Curabitur ornare turpis et ex vehicula, id porttitor dolor tempor. Cras suscipit commodo est vel dapibus. Fusce imperdiet nisi et&hellip;</div>
                                        <a href="#" class="read-more"></a>
                                    </div>
                                </li>
                                {% endfor %}  
                            </ul>
                     </div>
                    </div>
                    <!-- #primary -->
                </section>
            </main>
        </div>
    </div>
</div>   
{% endblock %}
{% block javascripts %}
<script>
var divs = ["content", "content1"];
    var visibleDivId = null;
function toggleVisibility(divId) {
  if(visibleDivId === divId) {
    //visibleDivId = null;
  } else {
    visibleDivId = divId;
  }
  hideNonVisibleDivs();
}
function hideNonVisibleDivs() {
  var i, divId, div;
  for(i = 0; i < divs.length; i++) {
    divId = divs[i];
    div = document.getElementById(divId);
    if(visibleDivId === divId) {
      div.style.display = "block";
    } else {
      div.style.display = "none";
    }
  }
}
</script>
{% endblock %}