<div class="lootbox">
    <div class="lootbox-description">
        <?= $box['description'] ?>
    </div>

    <h2 class="title" style="margin-bottom:0"><?= __('Available items') ?></h2>

    <div class="lootbox-items">
        <?php foreach ($items as $index => $item): ?>
            <div class="item" id="item-<?= $index ?>">
                <div class="name"><?= util('Item')->name($item['section'], $item['idx']) ?></div>
                <div class="image">
                    <img src="<?= util('Item')->image($item['section'], $item['idx']) ?>" />
                </div>
            </div>
        <?php endforeach ?>

        <div class="clear"></div>
    </div>

    <div class="lootbox-wheel">
        <canvas id="canvas" data-id="<?= $box['id'] ?>" width="400" height="400"></canvas>
    </div>

    <div class="align-center">
        <div class="lootbox-price">
            <?= $box['amount'] ?> <?= util('Coin')->name($box['coin']) ?>
        </div>

        <div class="lootbox-actions">
            <a class="btn open-box" data-confirm="<?= __('Are you sure you want to open this box?') ?>" href="<?= url_to('/lootboxes/open/' . $box['id']) ?>"><?= __('Open this box') ?></a>
            <a data-ajax class="btn" href="<?= url_to('/lootboxes/gift/' . $box['id']) ?>"><?= __('Give gift') ?></a>
        </div>
    </div>
</div>
