
<%--@elvariable id="approximateMaxDeliverySize" type="java.lang.Long"--%>
<%--@elvariable id="approximateMaxSizeIncludingImages" type="java.lang.Long"--%>
<%--@elvariable id="warningSizeThreshold" type="java.lang.Long"--%>

<%-- Show the value at least in KB since the byte number is inaccurate anyway --%>
<c:set var="roundedApproximateMaxDeliverySize" value="${emm:formatBytes(approximateMaxDeliverySize, 1, 'iec', emm:getLocale(pageContext.request))}" />
<c:set var="roundedApproximateMaxSizeIncludingImages" value="${emm:formatBytes(approximateMaxSizeIncludingImages, 1, 'iec', emm:getLocale(pageContext.request))}" />
<c:set var="shouldDisplaySizeWithImages" value="${roundedApproximateMaxDeliverySize ne roundedApproximateMaxSizeIncludingImages}" />

<div class="col-12">
    <div class="row g-1">
        <div class="col-12">
            <label class="form-label">
                <mvc:message code="mailing.size" />
                <a href="#" class="icon icon-question-circle" data-help="help_${helplanguage}/mailing/MailingMaxSize.xml"></a>
            </label>

            <c:if test="${shouldDisplaySizeWithImages}">
                <div class="input-group">
                    <span class="input-group-text input-group-text--disabled"><mvc:message code="mailing.NoImages"/></span>
            </c:if>
                    <input type="text" class="form-control ${approximateMaxDeliverySize < warningSizeThreshold ? '' : 'text-danger'}" value="${roundedApproximateMaxDeliverySize}" disabled>
            <c:if test="${shouldDisplaySizeWithImages}">
                </div>
            </c:if>
        </div>

        <c:if test="${shouldDisplaySizeWithImages}">
            <div class="col-12">
                <div class="input-group">
                    <span class="input-group-text input-group-text--disabled"><mvc:message code="mailing.size.external"/></span>
                    <input type="text" class="form-control ${approximateMaxSizeIncludingImages < warningSizeThreshold ? '' : 'text-danger'}" value="${roundedApproximateMaxSizeIncludingImages}" disabled>
                </div>
            </div>
        </c:if>
    </div>
</div>
