{{response.title=base_title + ' ' + T('Tree of Life Explorer')}}
{{response.files.append(URL('static', 'css/content_index.css'))}}
{{extend 'uikit_layout.html'}}

{{block masthead}}
<div class="home-heading uk-text-center uk-overflow-hidden">
  <h1>{{=XML(T('Welcome to the OneZoom %(slot0)s tree of life explorer...') % {'slot0': (xmlescape('' if request.application==current.OZglobals['default_application'] else request.application))})}}</h1>
  <p>{{=XML(T('The Tree of Life shows how all life on Earth is related. In our interactive tree of life you can explore the relationships between <b>%(slot0)s</b> species and wonder at <b>%(slot1)s</b> images on a single zoomable page. Each leaf represents a different species, and the branches illustrate how these many species evolved from common ancestors over billions of years. Explore the relationships between species, learn about their common ancestors, or embark on a guided tour around the tree. Zoom around the tree to be amazed by the diversity of life on Earth.') % {'slot0': (xmlescape("{:,}".format(n_species))), 'slot1': (xmlescape("{:,}".format(n_images)))})}}</p>
</div>
{{end block}}


<div class="uk-grid-small uk-child-width-expand@s uk-grid-match uk-grid-oz-dark" uk-grid>
  <div class="uk-card uk-card-default uk-card-small" style="height: 20rem; padding-left: 0;">
    <div class="hp_tour_ui" id="tour_wrapper"></div>
    <canvas id="OneZoomCanvasID" class="embedded" style="width: 100%; height: 100%"></canvas>
    <!-- treeviewer constants -->
    {{include 'treeviewer/server_urls.html' }}
    <script>
$(document).ready(function() {    /* Mainly a place to attach JS event handlers */
    // Set up some global variables
    /** CREATE A ONEZOOM INSTANCE
    this allows us to access e.g. onezoom.controller, onezoom.config, etc (defined in OZentry.js)
     **/

    setup_onezoom()
    function setup_onezoom() {
        window.onezoom = OZentry.default(
            window.server_urls,
            null, // No UI
            null, // No window title function
            'OneZoomCanvasID',
            window['tree_config']);
        {{if not sponsorship_enabled:}}
        window.onezoom.config.projection.draw_sponsors = false;
        {{pass}}
        window.onezoom.add_hook('on_tree_loaded', () => {
            /* we use the 'screensaver' tour to provide a constant animation */
            onezoom.controller.set_screensaver('/tour/homepage_animation', 0, 'block')
        })
    }
})
    </script>
  </div>
</div>

{{if len(carousel) == 0:}}
<!-- To show items in the "popular places" carousel, add "homepage_main" rows to the `tree_startpoints` table -->
{{else:}}
<div class="uk-grid-small uk-child-width-expand@s uk-grid-match uk-grid-oz-dark" uk-grid style="margin-top: 0; padding-top: 0;">
    <div class="uk-card uk-card-default uk-card-small">

        <h3 class="uk-card-title">{{=T('Popular places to start exploring...')}}</h3>

        <style>
        .oz-slider-popularplaces img {
          border: 10px solid white;
        }
        .oz-slider-popularplaces li {
          width: 120px;
        }
        .oz-slider-popularplaces > a.oz-slider-arrow {
          height: 95px;
        }

        .oz-slider-popularplaces li figcaption {
          padding: 1px;
          font-size: 90%;
        }
        </style>
        <div class="uk-position-relative uk-width-5-6 uk-container-center oz-slider-popularplaces" uk-slider="center: true; index: 1">
          <div class="uk-slider-container"><div class="inner-container"><ul class="uk-slider-items">{{for key in carousel:}}
            <li>
              <a href="{{=hrefs[key]}}" target="_blank"><figure>
                <div class="img-species leafout"><img src="{{=images.get(key, {}).get('url', '')}}"
                                                  onerror="this.onerror=null; this.src='{{=URL('static','images/notAvailable.png')}}'"
                                                      alt="{{=str(html_names.get(key, '')).capitalize()}}" /></div>
                <figcaption class="uk-text-center">{{=XML(str(html_names.get(key, '')).capitalize())}}</figcaption>
              </figure></a>
            </li>
            {{pass}}
          </ul></div></div>
          <a class="uk-position-top-left oz-slider-arrow oz-slider-arrow-left" href="#" uk-slider-item="previous"></a>
          <a class="uk-position-top-right oz-slider-arrow oz-slider-arrow-right" href="#" uk-slider-item="next"></a>
        </div>
      </div>
</div>
{{pass}}


<section class="oz-section bkgd-quotes"><div class="oz-section-body">
  <h3>{{=T('What they say...')}}</h3>
  {{if len(quotes) == 0:}}
  <!-- To show items in the "quotes" carousel, add "homepage_main" rows to the `quotes` table -->
  {{else:}}
  <div class="uk-position-relative" uk-slider="autoplay: true; autoplay-interval: 10000; pause-on-hover: true">
    <div class="uk-slider-container"><ul class="uk-slider-items uk-child-width-1-1">{{for q_items in quotes:}}{{for q in q_items:}} 
      <li>
        <blockquote>{{=XML(T(q.html_quote))}}
          <footer class="blockquote-footer">
              <cite><a href="{{=URL('default', 'endorsements.html#quote' + str(q.id))}}">{{=T(q.person)}}{{if q.html_affiliation:}}, {{=XML(T(q.html_affiliation))}}{{pass}}</a></cite>
          </footer>
        </blockquote>
      </li>
    {{pass}}{{pass}}</ul></div>
    <a class="uk-position-top-left oz-slider-arrow oz-slider-arrow-left" href="#" uk-slider-item="previous"></a>
    <a class="uk-position-top-right oz-slider-arrow oz-slider-arrow-right" href="#" uk-slider-item="next"></a>
  </div>
  {{pass}}
  <div><a href="{{=URL('default', 'endorsements.html')}}">{{=T('Other endorsements')}}</a></div>
</div></section>

{{if sponsorship_enabled:}}

<section class="oz-section bkgd-polytomy"><div class="oz-section-body uk-position-relative">
  <h3 class="uk-card-title">{{=T('Become a sponsor...')}}</h3>

  <p>
    {{=T('OneZoom is a registered non-profit in the UK, all our products are available for free. Help us raise awareness about the variety of life on earth and the need to conserve it!')}}

    {{if n_total_sponsored > 0:}}
      <strong><a href="{{=URL('default', 'donor_list.html')}}">{{=n_total_sponsored}} {{=T('people like you')}}</a></strong> {{=T('have helped us by making donations. Their names have appeared as sponsors on')}} <strong><a href="{{=URL('default', 'sponsored.html')}}">{{=n_sponsored_leaves}} {{=T('leaves of our tree of life')}}</a></strong> {{=T('leaves of our tree of life.')}}
    {{pass}}
  </p>
  <p>{{=T('Why not sponsor a leaf as a gift?')}}</p>

  <a class="oz-pill pill-leaf" href="//www.onezoom.org/sponsor.html" role="button">{{=T('Sponsor a leaf now!')}}</a>
</div></section>

{{pass}}

<div class="uk-child-width-expand@m uk-grid-match" style="border: 20px solid white" uk-grid>
  {{for sub_menu in response.menu[0:3]:}}
    <div>
      <div class="oz-pill with-splash">
        <h3>{{=T(sub_menu[0])}}</h3>
        {{=MENU(sub_menu[-1][0:4], _class="leaf-list")}}
        <!-- NB: 15rem is length of longest menu item -->
        <div class="oz-pill-splash" style="width: calc(100% - 15rem); background-image: url({{=menu_splash_images[sub_menu[0]]}})"></div>
      </div>
    </div>
  {{pass}}
</div>

{{if len(news) == 0:}}
<!-- To show items in the "news" carousel, add rows to the `news` table -->
{{else:}}
<section class="oz-section bkgd-natural"><div class="oz-section-body news-list">
  <h3 class="uk-card-title">{{=T("What we've been up to...")}}</h3>
  <div class="uk-position-relative" uk-slider>
    <div class="uk-slider-container"><ul class="uk-slider-items uk-child-width-1-1">{{for row in news:}}
      <li>
        <div class="uk-grid-small uk-text-small" uk-grid>
          <div class="uk-width-1-3@m">
            {{if row['thumbnail_href']:}}
            <img src="{{=row['thumbnail_href']}}" class="oz-pill non-default" />{{else:}}
            <img src="{{=URL('static', 'images/oz-news-generic.jpg')}}" class="oz-pill" />{{pass}}
          </div>
          <div class="uk-width-2-3@m uk-text-left">
            <h4 style="line-height: 0.75">{{=row['heading']}}</h4>
            {{=XML(row['body'])}}
            <div class="uk-text-center"><a href="{{=row['more_href']}}">{{=T('More...')}}</a></div>
          </div>
        </div>
      </li>
    {{pass}}</ul></div>
    <a class="uk-position-top-left oz-slider-arrow oz-slider-arrow-left" style="height:90%" href="#" uk-slider-item="previous"></a>
    <a class="uk-position-top-right oz-slider-arrow oz-slider-arrow-right" style="height:90%" href="#" uk-slider-item="next"></a>
  </div>
</div></section>
{{pass}}