{% extends "base.twig" %}

{% block content %}

<main>
    <section class="hero-page bg-dark-arrows">
        <div class="container">
            <h1 class="hero-page__main-title text-left text-align-left text-uppercase">{{ post.name }}</h1>
            <a href="{{ drill_store_page_template }}" class="h2 hero-page__back">Back to drill store</a>
        </div>
    </section>


    <section class="narrow-box-img">
        <div class="container narrow-box__container">
            <div class="narrow-box">
                <!--
                <div class="narrow-box__header">
                    <a href="#" class="btn btn--blank small text-uppercase">
                        <svg class="plus-icon"><use href="{{ site.theme.link }}/frontend/img/icons.svg#plus-icon"></use></svg> Add to cart</a>
                </div>
                -->
                <div class="narrow-box__content">
                    <div class="nums-emphasized">
                        <div class="nums-emphasized__num">
                            <p class="h2 number">{{ post.files.animations }}</p>
                            <p class="h5 text-uppercase">Animations</p>
                        </div>
                        <div class="nums-emphasized__num">
                            <p class="h2 number">{{ post.files.videos }}</p>
                            <p class="h5 text-uppercase">Videos</p>
                        </div>
                        <div class="nums-emphasized__num">
                            <p class="h2 number">{{ post.files.pictures }}</p>
                            <p class="h5 text-uppercase">Pictures</p>
                        </div>
                        <div class="nums-emphasized__num">
                            <p class="h2 number">${{post.price}}</p>
                            <p class="h5 text-uppercase">Price</p>
                        </div>
                    </div>
                    <h4>LEVELS</h4>
                    <p class="h5">
                    {% for level in post.levels %}
                        {{ level }}
                        {{ not loop.last ? ',' }}
                    {% endfor %}
                    </p>
                    <h4>DESCRIPTION</h4>
                    <p class="h5">{{ post.description | excerpt (60, ' ') }}<a href="#" class="btn btn--blank toggle-more-text" data-full-text="{{ post.description }}">Read more</a></p>                    
                    <div class="narrow-box__profile">
                        <div class="image">
                            <img src="{{ post.previews[1] }}" />
                        </div>
                        <div class="name">
                            <h2>{{ post.author.name }}</h2>
                            <span>AUTHOR</span>
                        </div>
                    </div>
                    <p class="h5">{{ post.author.biography | excerpt (60, ' ') }}<a href="#" class="btn btn--blank toggle-more-text" data-full-text="{{ post.author.biography }}">Read more</a></p>


                </div>

                    <div class="narrow-box__footer">
                        {% if (post.price != 0) %}
                        <h4>BUY THIS PACKAGE</h4>
                        <form action="#" id="buy-form" class="form--light">                        
                            <div class="form-group">
                                <label for="email">Please enter your login (Email) for the Coach version:</label>
                                <input type="email" id="email-input" name="email" data-fastspringurl="{{ post.fastSpringUrl }}" data-fastspringID="{{ post.id }}">
                                <div id="warning-message" data-error-type="required" class="error-msg">Please enter the login (Email) of your <strong>active Coach subscription</strong>.</div>
                            </div>                            
                            <div class="form__submit">
                                <input type="submit" value="CONTINUE" class="btn btn--primary">
                            </div>
                        </form>
                        {% else %}
                        <h4>Download this package in your HCV app.</h4>
                        {% endif %}
                    </div>


            </div>
         <div class="gallery-slider thumb-slider">
            <div class="navigation-wrapper">
                <div id="js-keen-slider" class="keen-slider">
                    {% for preview in post.previews %}
                        <div class="keen-slider__slide">
                            <img class="" src="{{ preview }}" alt="alt">
                        </div>
                    {% endfor %}
                </div>     
                <svg  id="arrow-left"  class="arrow arrow--left"><use href="{{ site.theme.link }}/frontend/img/icons.svg#arrow-left"></use></svg>        
                <svg id="arrow-right"  class="arrow arrow--right"><use href="{{ site.theme.link }}/frontend/img/icons.svg#arrow-right"></use></svg>
            </div>
            <div id="thumbs" class="slider-thumbs">
                {% for preview in post.previews %}
                    <div class="slider-thumbs__thumb {% if (loop.first) %}slider-thumbs__thumb--active{% endif %} ">
                        <img class="" src="{{ TimberImage(preview | resize( 108, 54 ) ) }}" alt="alt">
                    </div>
                {% endfor %}
                <div class="slider-thumbs__placeholder"></div>
                <div class="slider-thumbs__placeholder"></div>
                <div class="slider-thumbs__placeholder"></div>
                <div class="slider-thumbs__placeholder"></div>
                <div class="slider-thumbs__placeholder"></div>
            </div>
        </div>
    </section>
{% endblock %}