
<%--@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="form-group">
    <div class="col-sm-4">
        <label class="control-label">
            <mvc:message code="mailing.size" />
            <button type="button" class="icon icon-help" tabindex="-1"
                    data-help="help_${helplanguage}/mailing/MailingMaxSize.xml"></button>
        </label>
        <c:if test="${shouldDisplaySizeWithImages}">
            <label class="control-label">
                <mvc:message code="mailing.size.external" />
            </label>
        </c:if>
    </div>
    <div class="col-sm-8">
        <p class="form-control-static">
            <c:choose>
                <c:when test="${approximateMaxSizeIncludingImages < warningSizeThreshold}">
                    ${roundedApproximateMaxDeliverySize}
                </c:when>
                <c:otherwise>
                    <span style="color: red; font-weight: bold;">${roundedApproximateMaxDeliverySize}</span>
                </c:otherwise>
            </c:choose>

            <c:if test="${shouldDisplaySizeWithImages}">
                <c:choose>
                    <c:when test="${approximateMaxSizeIncludingImages < warningSizeThreshold}">
                        <p>${roundedApproximateMaxSizeIncludingImages}</p>
                     </c:when>
                    <c:otherwise>
                         <p style="color: red; font-weight: bold;">${roundedApproximateMaxSizeIncludingImages}</p>
                    </c:otherwise>
                 </c:choose>
            </c:if>
        </p>
    </div>
</div>
