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

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

{% block body %}
        <style>
            .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
            .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
        </style>

<div class="uk-container uk-container-center">
    <div class="uk-grid" data-uk-grid-match data-uk-grid-margin>
        <div class="tm-main uk-width-medium-3-4 tm-middle">
            <main class="tm-content">
                <section>
                    <div data-uk-slider class="">
                        <div class="uk-slider-container post-gallery">
                            <ul class="uk-slider uk-grid-width-medium-1-1">
                            </ul>
                            <a href="" class="tm-slidenav tm-post-gallery-previous" data-uk-slider-item="previous" draggable="false"><i class="uk-icon-angle-left"></i></a>
                            <a href="" class="tm-slidenav tm-post-gallery-next" data-uk-slider-item="next" draggable="false"><i class="uk-icon-angle-right"></i></a>
                        </div>
                    </div>
                    
                    <div id="primary" class="site-content post-content">
                        <div class="main-heading">
                            <h1 class="tm-page-title">{{NomLivre}}</h1>
                            <button type="button" onclick="showlivre('content');">Louis-Segond</button>
                            <button type="button" onclick="showlivre('content1');">Darby</button>
                            <button type="button" onclick="showlivre('content2');">King-James</button>
                            <a class="" href="{{ path('audio', {'id': id}) }}" data-uk-modal=""><i class="uk-icon-headphones"></i></a>
                        </div>
                        <div id="content" role="main">
                        </br> </br>
                                {% for cr in cr %}
                                        <button type="button" onclick="showLS('id{{cr}}');">{{cr}}</button>
                                {% endfor %}
                                </br></br>
                            {% for k, terms in data %}
                                    <div id="id{{k}}"> 
                                {% for val in terms %}
                                          
                                 {% for key, va in val %}
                                 {% set counter = ( counter | default(0) ) + 1 %}
                                 
                                      <b>{{ counter }}</b> {{va}} 
                                       
                                    {% endfor %}
                                    
                                {% endfor %}
                                </div>
                            {% endfor %}
                            
                            
                            
                            <div class="clr"></div>
                        </div>
                        <!-- #content -->
                        <div id="content1" role="main">
                        </br> </br>
                                {% for cr1 in cr1 %}
                                        <button type="button" onclick="showKJ('i{{cr1}}');">{{cr1}}</button>
                                {% endfor %}
                                </br></br>
                            {% for k, terms in dataDB %}
                                    <div id="i{{k}}"> 
                                {% for val in terms %}
                                        <p>  
                                 {% for key, va in val %}
                                        {% set counter = ( counter | default(0) ) + 1 %}
                                      <b>{{ counter }}</b> {{va}} 
                                    {% endfor %}
                                    
                                {% endfor %}
                                </div>
                            {% endfor %}
                        </div>
                        <div id="content2" role="main">
                        </br> </br>
                                {% for cr2 in cr2 %}
                                        <button type="button" onclick="showDB('ix{{cr2}}');">{{cr2}}</button>
                                {% endfor %}
                                </br></br>
                                {% for k, terms in dataKJ %}
                                    <div id="ix{{k}}"> 
                                {% for val in terms %}
                                          
                                 {% for key, va in val %}
                                        {% set counter = ( counter | default(0) ) + 1 %}
                                      <b>{{ counter }}</b> {{va}}
                                    {% endfor %}
                                    
                                {% endfor %}
                                </div>
                            {% endfor %}
                        
                        </div>
                    </div>
                    <!-- #primary -->
                </section>
            </main>
        </div>

        <aside class="tm-sidebar-b uk-width-medium-1-4 tm-middle">
            <div class="uk-panel uk-panel-box widget_text">
                <div class="uk-panel-badge uk-badge uk-badge-danger"></div>
                <h3 class="uk-panel-title"><i class="uk-icon-bank"></i> Livre</h3>
                <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
                        <ul id="myUL">
                        {% for key, value in livre %}
                        <li><a href="{{ path('livre', {'id': key}) }}">{{value}}</a></li>
                        {% endfor %}
                        </ul>
                 </div>
            
        </aside>
    </div>
</div>

<div class="tm-footer-top-box tm-dark-bg">
    <div class="uk-container uk-container-center">
        <!-- start full width -->
        <section class="tm-footer-top uk-grid tm-medium-padding" data-uk-grid-match="{target:'> div > .uk-panel'}" data-uk-grid-margin>

            <div class="uk-width-1-1 uk-width-large-1-3">
                <div class="uk-panel widget_text">
                    <h3 class="uk-panel-title">About us</h3>
                    <p>In vitae velit mauris. Donec sodales posuere pretium. Suspendisse dolor tortor, fringilla sed feugiat quis, imperdiet vitae tortor. Suspendisse et magna ligula. Ut nec facilisis lectus. Maecenas venenatis sem aliquam, tempor ante ut, facilisis ... </p>
                </div>
            </div>

            <div class="uk-width-1-1 uk-width-large-1-3">
                <div class="uk-panel widget_text">
                    <h3 class="uk-panel-title">Links</h3>
                    <ul class="footer-links">
                        <li><a href="http://www.facebook.com" target="_blank">In vitae velit mauris</a>
                        </li>
                        <li><a href="http://twitter.com/" target="_blank">Lorem ipsum dolor</a>
                        </li>
                        <li><a href="http://plus.google.com/" target="_blank">Donec vitae tortor</a>
                        </li>
                        <li><a href="http://www.linkedin.com" target="_blank">Donec magna sapien</a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="uk-width-1-1 uk-width-large-1-3">
                <div class="uk-panel widget_text">
                    <h3 class="uk-panel-title">Newslatter</h3>
                    <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
                    <div class="subscribe">
                        <div role="form" class="wpcf7" id="wpcf7-f405-o1" lang="en-US" dir="ltr">
                            <div class="screen-reader-response"></div>
                            <form method="post" class="wpcf7-form" novalidate="novalidate">
                                <div style="display: none;">
                                    <input type="hidden" name="_wpcf7" value="405" />
                                    <input type="hidden" name="_wpcf7_version" value="4.3" />
                                    <input type="hidden" name="_wpcf7_locale" value="en_US" />
                                    <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f405-o1" />
                                    <input type="hidden" name="_wpnonce" value="7eb6dd6d20" />
                                </div>
                                <div class="uk-grid uk-grid-small">
                                    <div class="uk-grid-width-small-4-6 uk-width-medium-4-6 uk-grid-width-large-4-6">
                                        <span class="wpcf7-form-control-wrap email-639"><input type="email" name="email-639" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" placeholder="Your email" /></span>
                                    </div>
                                    <div class="uk-grid-width-small-2-6 uk-width-medium-2-6 uk-grid-width-large-2-6">
                                        <input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" />
                                    </div>
                                </div>
                                <div class="wpcf7-response-output wpcf7-display-none"></div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <!-- end full width -->
</div>
        <div class="example-wrapper">
                              
</div>
{% endblock %}

{% block javascripts %}
 
<script type="text/javascript">
function showLS(elementId) { 
    {% for cr in cr %}
 document.getElementById("id{{cr}}").style.display="none";
 
 document.getElementById(elementId).style.display="block";
 {% endfor %}
}

/////
function showKJ(elementId) { 
    {% for cr1 in cr1 %}
 document.getElementById("i{{cr1}}").style.display="none";
 
 document.getElementById(elementId).style.display="block";
 {% endfor %}
}

////////
function showDB(elementId) { 
    {% for cr2 in cr2 %}
 document.getElementById("ix{{cr2}}").style.display="none";
 
 document.getElementById(elementId).style.display="block";
 {% endfor %}
}

////////

function showlivre(elementId) { 
 document.getElementById("content").style.display="none";
 document.getElementById("content1").style.display="none";
 document.getElementById("content2").style.display="none";
 document.getElementById(elementId).style.display="block";
}
function myFunction() {
  // Declare variables
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById('myInput');
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName('li');

  // Loop through all list items, and hide those who don't match the search query
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}
</script>

{% endblock %}