<?php
/**
 * Bold — a full-width accent header block with a large title. Shared body from
 * _content.php.
 *
 * @var array<string, mixed> $data
 */

if (!defined('ABSPATH')) {
    exit;
}

// Template partial included in a render method; its locals are not globals.
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound

$accent = '#0d9488';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
    body { font-family: <?php echo esc_attr($data['font']); ?>; font-size: 12px; color: #134e4a; margin: 0; }
    .hero { background: <?php echo esc_attr($accent); ?>; color: #fff; padding: 34px 34px 26px; }
    .hero table { width: 100%; } .hero td { color: #fff; vertical-align: bottom; }
    .hero .big { font-size: 40px; font-weight: bold; letter-spacing: -.01em; text-transform: uppercase; }
    .hero .no { text-align: right; font-size: 12px; }
    .hero .logo img { max-height: 54px; }
    .wrap { padding: 26px 34px; }
    .meta { width: 100%; margin: 4px 0 22px; } .meta td { vertical-align: top; width: 50%; font-size: 11px; }
    .label { text-transform: uppercase; font-size: 10px; letter-spacing: .05em; color: <?php echo esc_attr($accent); ?>; font-weight: bold; margin-bottom: 4px; }
    table.items { width: 100%; border-collapse: collapse; }
    table.items th { text-align: left; background: <?php echo esc_attr($accent); ?>; color: #fff; padding: 10px 8px; font-size: 11px; }
    table.items td { padding: 9px 8px; border-bottom: 1px solid #ccfbf1; }
    .right { text-align: right; }
    table.totals { width: 42%; margin-left: 58%; margin-top: 12px; border-collapse: collapse; }
    table.totals td { padding: 6px 8px; }
    table.totals tr:last-child td { border-top: 2px solid <?php echo esc_attr($accent); ?>; font-weight: bold; font-size: 14px; color: <?php echo esc_attr($accent); ?>; }
    .foot { margin-top: 40px; font-size: 10px; color: #5eead4; }
</style>
</head>
<body>
    <?php require $data['partials'] . '/_watermark.php'; ?>

    <div class="hero">
        <table>
            <tr>
                <td>
                    <?php if (!empty($data['logo'])) : ?>
                        <div class="logo"><img src="<?php echo esc_attr($data['logo']); ?>" alt=""></div>
                    <?php endif; ?>
                    <div class="big"><?php echo esc_html($data['doc_title']); ?></div>
                </td>
                <td class="no">
                    #<?php echo esc_html($data['invoice_no']); ?><br>
                    <?php echo esc_html($data['date']); ?>
                    <?php if (!empty($data['po_number'])) : ?><br><?php echo esc_html__('PO', 'softminal-b2b-wholesale-for-woocommerce') . ': ' . esc_html($data['po_number']); ?><?php endif; ?><br>
                    <strong><?php echo esc_html($data['seller']['name']); ?></strong>
                </td>
            </tr>
        </table>
    </div>

    <div class="wrap">
        <?php require $data['partials'] . '/_content.php'; ?>
    </div>
</body>
</html>
