<?php
/** @var \Dotdigitalgroup\Email\Block\Basket $block */
?>
<?php $items = $block->getBasketItems(); ?>
<?php if ($items): ?>
    <?php $dynamicStyle = $block->getDynamicStyles(); ?>
    <style>
        .product-name {
            color: <?= $block->escapeHtml($dynamicStyle['nameColor']); ?>;
            font-size: <?= $block->escapeHtml($dynamicStyle['fontSize']); ?>;
            <?php if (in_array('bold', $dynamicStyle['nameStyle'])): ?>
                font-weight: bold;
            <?php endif; ?>
            <?php if (in_array('italic', $dynamicStyle['nameStyle'])): ?>
                font-style: italic;
            <?php endif; ?>
            <?php if (in_array('underline', $dynamicStyle['nameStyle'])): ?>
                text-decoration: underline;
            <?php endif; ?>
            padding: 1px;
            border-bottom: 1px solid #cbd3d4;
            border-right: 1px solid #cbd3d4;
        }

        .product-price {
            color: <?= $block->escapeHtml($dynamicStyle['priceColor']); ?>;
            font-size: <?= $block->escapeHtml($dynamicStyle['priceFontSize']); ?>;
            padding: 5px;
            border-bottom: 1px solid #cbd3d4;
            <?php if (in_array('bold', $dynamicStyle['priceStyle'])): ?>
                font-weight: bold;
            <?php endif; ?>
            <?php if (in_array('italic', $dynamicStyle['priceStyle'])): ?>
                font-style: italic;
            <?php endif; ?>
            <?php if (in_array('underline', $dynamicStyle['priceStyle'])): ?>
                text-decoration: underline;
            <?php endif; ?>
        }

        .product-url {
            color: <?= $block->escapeHtml($dynamicStyle['urlColor']); ?>;
            font-size: <?= $block->escapeHtml($dynamicStyle['urlFontSize']); ?>
            <?php if (in_array('bold', $dynamicStyle['linkStyle'])): ?>
                font-weight: bold;
            <?php endif; ?>
            <?php if (in_array('italic', $dynamicStyle['linkStyle'])): ?>
                font-style: italic;
            <?php endif; ?>
            <?php if (in_array('underline', $dynamicStyle['linkStyle'])): ?>
                text-decoration: underline;
            <?php endif; ?>
        }

        .other-text {
            color: <?= $block->escapeHtml($dynamicStyle['otherColor']); ?>;
            font-size: <?= $block->escapeHtml($dynamicStyle['otherFontSize']); ?>;
            <?php if (in_array('bold', $dynamicStyle['otherStyle'])): ?>
                font-weight: bold;
            <?php endif; ?>
            <?php if (in_array('italic', $dynamicStyle['otherStyle'])): ?>
                font-style: italic;
            <?php endif; ?>
            <?php if (in_array('underline', $dynamicStyle['otherStyle'])): ?>
                text-decoration: underline;
            <?php endif; ?>
        }

        .product-table {
            font-family: <?= $block->escapeHtml($dynamicStyle['docFont']); ?>;
            background-color: <?= $block->escapeHtml($dynamicStyle['docBackgroundColor']); ?>;
            width: 100% !important;
            float:left;
            border: 1px solid #cbd3d4;
            border-collapse: collapse;
            padding: 5px;
        }

        .product-table img {
            display: block;
            margin-left: auto;
            margin-right: auto
        }

        .product-table td {
            width: 25%;
            padding-bottom: 10px;
            text-align: center;
        }

        tr.noborder td {
            border: none !important;
        }

        .pt-th-style-one {
            padding: 5px;
            border-bottom: 1px solid #cbd3d4;
            border-right: 1px solid #cbd3d4;
        }

        .pt-th-style-two {
            padding: 5px;
            border-bottom: 1px solid #cbd3d4;
        }

        .product-table .quantity {
            padding: 1px;
            border-bottom: 1px solid #cbd3d4;
            border-right: 1px solid #cbd3d4;
        }

        .product-table .product-image {
            padding: 5px;
            border-bottom: 1px solid #cbd3d4;
            border-right: 1px solid #cbd3d4;
        }

        .hidemob {
            border: none !important;
        }

        .other-text-padding {
            padding: 5px;
        }

        .cart-link {
            text-align: center;
        }

        <?= $block->escapeHtml($dynamicStyle['dynamicStyling']); ?>
        /** Responsive  **/
        @media (max-width: 760px) {
            /* Force table to not be like tables anymore */
            .product-table table, .product-table thead, .product-table tbody,
            .product-table th, .product-table td, .product-table tr {
                display: block;
            }

            .product-table td {
                width: 200px !important;
            }

            .product-table {
                width: auto !important;
                margin: 0 auto;
                float: none !important;
            }

            .product-table tr {
                border: none;
                border-bottom: 1px solid #eee;
                margin-bottom: 10px !important;
            }

            .product-table td {
                border: none !important;
                position: relative;
            }

            .quantity:before {
                content: 'Quantity:';
            }

            .product-table td:before {
                position: relative;
            }

            .product-table tr th {
                display: none !important;
                border: none !important;
            }
            .hidemob {
                display: none !important;
            }
        }
    </style>
    <table class="product-table">
        <tr>
            <th class="other-text pt-th-style-one">
                <?= $block->escapeHtml(__("Image")); ?>
            </th>
            <th class="other-text pt-th-style-one">
                <?= $block->escapeHtml(__("Description")); ?>
            </th>
            <th class="other-text pt-th-style-one">
                <?= $block->escapeHtml(__("Quantity")); ?>
            </th>
            <th class="other-text pt-th-style-two">
                <?= $block->escapeHtml(__('Total')); ?>
            </th>
        </tr>
        <?php foreach ($items as $item): ?>
            <tr>
                <td class="product-image">
                    <?php //@codingStandardsIgnoreStart ?>
                    <img src="<?= $block->getProductImageUrl($item['product_details']) ?>"
                         alt="<?= $item['product']->getName() ?>">
                    <?php //@codingStandardsIgnoreEnd ?>
                </td>
                <td class="product-name">
                    <a class="product-url" href="<?= $block->escapeHtml($item['productUrl']); ?>">
                    <?= $block->escapeHtml($item['product']->getName())
                        . '</a></br>'
                    ?></td>
                <td class="product-price quantity">
                    <?= (int) $item['qty']; ?>
                </td>
                <td class="product-price">
                    <?= $block->escapeHtml($item['total']); ?>
                </td>
            </tr>
        <?php endforeach; ?>
        <tr>
            <td class="hidemob"></td>
            <td class="hidemob"></td>
            <td class="hidemob"></td>
            <td class="other-text other-text-padding">
                <?php //@codingStandardsIgnoreStart ?>
                <?= $block->getGrandTotalWithCurrency() ?>
                <?php //@codingStandardsIgnoreEnd ?>
            </td>
        </tr>
    </table>
    <?php if ($block->canShowUrl()): ?>
        <p class="cart-link">
            <a href="<?= $block->escapeUrl($block->getUrlForLink()); ?>" class="product-url">
                <strong>
                    <?php
                    $link = ($block->takeMeToCartTextForUrl()) ?
                        $block->takeMeToCartTextForUrl() : __('Take Me To My Basket');
                    echo $block->escapeHtml($link); ?>
                </strong>
            </a>
        </p>
    <?php endif; ?>
<?php endif; ?>
