# Szablon: katalog nagród produkt
# W katalogu
|--src/ → Pliki źródłowe
| |--templates/ → Szablony: katalog główny
| | |--pages/ → Szablony: podstrony
| | | |--katalog-nagrod-produkt.twig
# HTML
{% extends '../layouts/default.twig' %}
{% set head_title = 'Katalog nagród' %}
{% set body_class = '' %}
{% block pagecss %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/css/select2.min.css" integrity="sha256-FdatTf20PQr/rWg+cAKfl6j4/IY3oohFAJ7gVC3M34E=" crossorigin="anonymous" />
{% endblock %}
{% block page %}
{% include '../../modules/top/top.twig' %}
<div class="container">
<div class="row">
<div class="col-12 col-lg-3 col-hd-2">
{% include '../../modules/sidebar/sidebar.twig' %}
</div>
<div class="col-12 col-lg-9 col-hd-10">
<div class="titleBar titleBar__button">
<div>
<div class="titleBar__title">Katalog nagród</div>
</div>
<div class="button-sets button-sets__np">
<a href="" class="btn btn-shopping btn-shopping__basket">
<div class="btn-shopping__basketCount">2</div>
<div>
<img src="./img/icon__shopping-cart.svg" alt="">
<span class="btn-shopping__title">Koszyk</span>
</div>
<div>
<span class="btn-shopping__subtitle">2 produkty</span>
<div class="points">1200 <sup>pkt</sup></div>
</div>
</a>
<a href="" class="btn btn-shopping btn-shopping__history">
<div>
<img src="./img/icon__clock.svg" alt="">
<span class="btn-shopping__title">Historia</span>
</div>
<div>
<span class="btn-shopping__subtitle">3 produkty</span>
</div>
</a>
</div>
</div>
<div class="page-container mb-16-mobile mb-32-desktop">
<div class="contentBar">
<div class="titleBar titleBar__content">
<div>
<div class="titleBar__subtitle">Dla domu</div>
<div class="titleBar__title">10 seansów VOUCHER</div>
</div>
<div></div>
</div>
</div>
<div class="page-columns">
<div class="page-column__main">
<div class="productImage"><img src="http://box.youngme1.pro-linuxpl.com/storage/catalogue/catalogue_5_gvgs.png" alt=""></div>
<div class="productContent">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio inventore ducimus alias nemo dolores, dolor laboriosam hic blanditiis? Id deserunt amet quo exercitationem autem in. Laborum nostrum molestiae rerum ullam. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Possimus aut, magni, illo voluptas saepe tenetur modi mollitia voluptatibus ipsum qui, nulla non molestias eos doloribus blanditiis laborum explicabo quas quisquam.</p>
</div>
</div>
<div class="page-column__sidebar">
<div class="shoppingCard">
<div class="text-secondary">Wartość nagrody</div>
<div class="points">1200<sup>pkt</sup></div>
<progress max="100" value="60">
<div class="progress-bar" data-percent="60">
<span style="width: 60%;">Progress: 60%</span>
</div>
</progress>
<div class="input-field">
<label for="">Kolor</label>
<select name="color" id="" style="width: 100%">
<option value=""></option>
<option value="1">Biały</option>
<option value="2">Czarny</option>
<option value="3">Kolorowy</option>
</select>
</div>
<div class="shoppingCardRow">
<div>
<div class="text-secondary">Ilość</div>
<div class="amount" data-js="amount">
<button class="amount__minus"></button>
<input type="text" name="product_amount" id="product_amount" class="amount__input" value="1" />
<button class="amount__plus"></button>
</div>
</div>
<div>
<div class="text-secondary">Koszt</div>
<div class="points">1200<sup>pkt</sup></div>
</div>
</div>
<button type="submit" class="btn btn-secondary btn-block">DODAJ DO KOSZYKA</button>
{# <button type="submit" class="btn btn-secondary btn-block" disabled>DODAJ DO KOSZYKA</button> #}
<div class="productProgress">
<div class="productProgressWrap">
<div class="switch">
<label>
<input type="checkbox">
<span class="lever"></span>
</label>
</div>
<p>Śledź postęp<br>w zbieraniu punktów</p>
</div>
<p>Postęp zbierania punktów na tę nagrodę będzie pokazywany na stronie z zadaniami.</p>
</div>
</div>
</div>
</div>
</div>
<div class="titleBar titleBar__button">
<div>
<div class="titleBar__title">W tej samej kategorii</div>
</div>
<div>
<a href="" class="btn btn-icon"><span>Zobacz wszytskie</span><img src="./img/icon__arrow-right.svg" alt=""></a>
</div>
</div>
<div class="page-container">
{% include '../../modules/productList/productList.twig' %}
</div>
{% include '../components/footer.twig' with { 'container': false } %}
</div>
</div>
</div>
{% endblock %}
{% block pagejs %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/select2.min.js" integrity="sha256-wfVTTtJ2oeqlexBsfa3MmUoB77wDNRPqT1Q1WA2MMn4=" crossorigin="anonymous"></script>
<script>
$('select').select2({
minimumResultsForSearch: Infinity,
placeholder: 'Wybierz',
theme: 'salesgames'
});
</script>
{% endblock %}