<style>
    .dealflow-company-box {
        background: var(--layer-02);
        border: 1px solid var(--border-subtle-01);
        border-radius: var(--border-radius-lg);
        margin-top: 16px;
        overflow: hidden;
    }

    .dealflow-company-box__header {
        background: linear-gradient(135deg, var(--layer-01) 0%, var(--layer-02) 100%);
        border-bottom: 1px solid var(--border-subtle-01);
        padding: 16px 18px;
    }

    .dealflow-company-box__eyebrow {
        align-items: center;
        color: var(--text-secondary);
        display: inline-flex;
        font-size: 11px;
        font-weight: 700;
        gap: 8px;
        letter-spacing: .08em;
        margin-bottom: 10px;
        text-transform: uppercase;
    }

    .dealflow-company-box__eyebrow-icon {
        align-items: center;
        background: var(--layer-accent-01);
        border: 1px solid var(--border-subtle-01);
        border-radius: 999px;
        color: var(--text-primary);
        display: inline-flex;
        height: 22px;
        justify-content: center;
        width: 22px;
    }

    .dealflow-company-box__title-row {
        align-items: flex-start;
        display: flex;
        gap: 12px;
        justify-content: space-between;
    }

    .dealflow-company-box__title {
        color: var(--text-primary);
        font-size: 16px;
        font-weight: 600;
        margin: 0;
    }

    .dealflow-company-box__subtitle {
        color: var(--text-secondary);
        font-size: 13px;
        line-height: 1.5;
        margin: 6px 0 0;
    }

    .dealflow-company-box__count {
        align-items: center;
        background: var(--layer-accent-01);
        border: 1px solid var(--border-subtle-01);
        border-radius: var(--border-radius-sm);
        color: var(--text-primary);
        display: inline-flex;
        font-size: 12px;
        font-weight: 700;
        justify-content: center;
        min-width: 32px;
        padding: 6px 10px;
    }

    .dealflow-company-box__body {
        padding: 16px 18px 18px;
    }

    .dealflow-company-box__list {
        display: grid;
        gap: 12px;
    }

    .dealflow-company-box__item {
        background: var(--background);
        border: 1px solid var(--border-subtle-01);
        border-radius: var(--border-radius-md);
        box-shadow: 0 10px 30px -24px rgba(0, 0, 0, .35);
        color: inherit;
        display: block;
        padding: 14px;
        text-decoration: none;
        transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
    }

    .dealflow-company-box__item:hover,
    .dealflow-company-box__item:focus {
        background: linear-gradient(135deg, var(--background) 0%, var(--layer-01) 100%);
        border-color: var(--border-interactive);
        box-shadow: 0 18px 34px -26px rgba(0, 0, 0, .45);
        color: inherit;
        text-decoration: none;
        transform: translateY(-1px);
    }

    .dealflow-company-box__item:focus-visible {
        box-shadow: 0 0 0 2px var(--layer-01), 0 0 0 4px var(--border-interactive);
        outline: 0;
    }

    .dealflow-company-box__item-head {
        align-items: flex-start;
        display: flex;
        gap: 8px;
        justify-content: space-between;
    }

    .dealflow-company-box__deal-title {
        color: var(--text-primary);
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: -.02em;
        line-height: 1.3;
    }

    .dealflow-company-box__amount {
        flex: 0 0 auto;
        min-width: 0;
        text-align: right;
    }

    .dealflow-company-box__amount-value {
        color: var(--text-primary);
        font-size: 18px;
        font-weight: 700;
        letter-spacing: -.02em;
        line-height: 1.15;
    }

    .dealflow-company-box__meta {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 10px;
    }

    .dealflow-company-box__meta-item {
        background: var(--layer-01);
        border: 1px solid var(--border-subtle-01);
        border-radius: var(--border-radius-sm);
        min-height: 62px;
        padding: 10px 12px;
    }

    .dealflow-company-box__meta-label {
        color: var(--text-secondary);
        display: block;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .06em;
        margin-bottom: 6px;
        text-transform: uppercase;
    }

    .dealflow-company-box__meta-value {
        color: var(--text-primary);
        font-size: 13px;
        font-weight: 600;
        line-height: 1.45;
    }

    .dealflow-company-box__empty {
        background: var(--layer-01);
        border: 1px dashed var(--border-subtle-01);
        border-radius: var(--border-radius-md);
        color: var(--text-secondary);
        font-size: 13px;
        line-height: 1.6;
        margin: 0;
        padding: 14px;
    }

    .dealflow-company-box__footer {
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid var(--border-subtle-01);
    }

    .dealflow-company-box__footer-link {
        align-items: center;
        display: inline-flex;
        font-size: 13px;
        font-weight: 600;
        gap: 6px;
    }

    @media (max-width: 767px) {
        .dealflow-company-box__title-row,
        .dealflow-company-box__item-head {
            flex-direction: column;
        }

        .dealflow-company-box__amount {
            min-width: 0;
            text-align: left;
        }

        .dealflow-company-box__meta {
            grid-template-columns: minmax(0, 1fr);
        }
    }
</style>

<div class="dealflow-company-box">
    <div class="dealflow-company-box__header">
        <div class="dealflow-company-box__eyebrow">
            <span class="dealflow-company-box__eyebrow-icon">
                <i class="ri-briefcase-4-line"></i>
            </span>
            <span>{{ 'mautic.dealflow.company.box.eyebrow'|trans }}</span>
        </div>
        <div class="dealflow-company-box__title-row">
            <div>
                <h5 class="dealflow-company-box__title">{{ 'mautic.dealflow.company.box.title'|trans }}</h5>
                <p class="dealflow-company-box__subtitle">{{ 'mautic.dealflow.company.box.subtitle'|trans }}</p>
            </div>
            {% if totalDealCount > 0 %}
                <span class="dealflow-company-box__count">{{ totalDealCount }}</span>
            {% endif %}
        </div>
    </div>

    <div class="dealflow-company-box__body">
        {% if deals is empty %}
            <p class="dealflow-company-box__empty">{{ 'mautic.dealflow.company.box.empty'|trans }}</p>
        {% else %}
            <div class="dealflow-company-box__list">
                {% for deal in deals %}
                    {% set amountMarkup = include('@DealFlow/Deal/_amount.html.twig', {amount: deal.getAmount(), currency: deal.getCurrency(), compact: true}, false)|trim %}
                    <a
                        class="dealflow-company-box__item"
                        href="{{ path('mautic_dealflow_view', {'objectId': deal.getId()}) }}"
                        data-toggle="ajax"
                    >
                        <div class="dealflow-company-box__item-head">
                            <div>
                                <h6 class="dealflow-company-box__deal-title">{{ deal.getTitle()|purify }}</h6>
                            </div>
                            <div class="dealflow-company-box__amount">
                                <div class="dealflow-company-box__amount-value">{{ amountMarkup }}</div>
                            </div>
                        </div>

                        <div class="dealflow-company-box__meta">
                            <div class="dealflow-company-box__meta-item">
                                <span class="dealflow-company-box__meta-label">{{ 'mautic.dealflow.company.box.stage'|trans }}</span>
                                <div class="dealflow-company-box__meta-value">
                                    {{ deal.getStage() ? deal.getStage().getName()|purify : 'mautic.dealflow.company.box.no_stage'|trans }}
                                </div>
                            </div>
                            <div class="dealflow-company-box__meta-item">
                                <span class="dealflow-company-box__meta-label">{{ 'mautic.dealflow.company.box.expected_close'|trans }}</span>
                                <div class="dealflow-company-box__meta-value">
                                    {{ deal.getExpectedCloseDate() ? deal.getExpectedCloseDate().format('Y-m-d') : 'mautic.dealflow.company.box.not_set'|trans }}
                                </div>
                            </div>
                        </div>
                    </a>
                {% endfor %}
            </div>
        {% endif %}

        {% if viewAllUrl and totalDealCount > 0 %}
            <div class="dealflow-company-box__footer">
                <a class="dealflow-company-box__footer-link" href="{{ viewAllUrl }}" data-toggle="ajax">
                    <span>{{ 'mautic.dealflow.company.box.view_all'|trans }}</span>
                    <i class="ri-arrow-right-up-line"></i>
                </a>
            </div>
        {% endif %}
    </div>
</div>
