<h1 class="title"><?= $shop['name'] ?> - <?= $category['name'] ?> - <?= $product['name'] ?></h1>

<ul class="breadcrumber">
    <li><a href="<?= url_to('/') ?>" data-ajax><?= __('Home') ?></a></li>
    <li><a href="<?= url_to('/shops') ?>" data-ajax><?= __('WebShops') ?></a></li>
    <li><a href="<?= url_to('/shop/' . $shop['slug']) ?>" data-ajax><?= $shop['name'] ?></a></li>
    <li><a href="<?= url_to('/shop/' . $shop['slug'] . '/' . $category['slug']) ?>" data-ajax><?= $category['name'] ?></a></li>
    <li class="active"><?= $product['name'] ?></li>
</ul>

<div class="product-detail">

    <div class="left">
        <div class="image">
            <img src="<?= util('WebShop.WebShop')->image($product) ?>" />
        </div>

        <div class="price">
            Total:
            <span data-price="<?= $prices['default'] ?>" id="product-price"><?= $product['price'] ?></span>
            <?= util('Coin')->name($shop['coin']) ?>(s)
        </div>
    </div>
    <div class="detail">
        <form data-ajax id="shop-product" action="<?= url_to('/shop/' . $shop['slug'] . '/' . $category['slug'] . '/' . $product['slug'] . '/buy') ?>" method="POST" class="form form-action">
            <?= csrf_field() ?>

            <input type="hidden" name="id" value="<?= $product['id'] ?>" id="product-id" />

            <?php if ($product['is_kit']): ?>
                <?php partial('WebShop.product-kit', [
                    'product' => $product,
                    'items' => $items
                ]) ?>
            <?php else: ?>
                <?php partial('WebShop.product-detail', [
                    'product' => $product,
                    'prices' => $prices,
                    'shop' => $shop,
                    'excellents' => $excellents,
                    'maxExcellents' => $maxExcellents,
                    'quantities' => $quantities,
                    'ancients' => $ancients,
                    'harmonys' => $harmonys,
                    'sockets' => $sockets
                ]) ?>
            <?php endif ?>

            <div class="box-panel margin-bottom">
                <div class="box-panel-title"><?= __('Discount coupon') ?></div>
                <div class="box-panel-content">
                    <div class="row">
                        <div class="label">
                            <label for="product-coupon"><?= __('Coupon') ?></label>
                        </div>
                        <div class="field">
                            <input type="text" name="coupon" id="product-coupon" style="width:100%" />
                        </div>
                    </div>
                </div>
            </div>

            <div class="submit">
                <input type="submit" value="<?= __('Purchase') ?>" class="btn" />
            </div>
        </form>
    </div>
</div>
