<div class="ti-total-area">
    <div class="step1-inactive">
        <p class="ti-total-area__waste">
            10% wastage included
        </p>
        <div class="ti-total-area__row">
            <div class="ti-total-area__row-specification">
                Total:
            </div>
            <div class="ti-total-area__row-value">
                <span class="ti-total-area__row-cost">75</span>
                {{#unless flooring}}
                    <span class="ti-total-area__row-sqm">SQ<span class="ti-unit_big">M</span></span>
                {{else}}
                    <span><span class="ti-total-area__row-sqm fi__unit">m</span><sup>2</sup></span>
                {{/unless}}
            </div>
        </div>
        <div class="ti-total-area__row">
            <div class="ti-total-area__row-specification">
                Quantity:
            </div>
            <div class="ti-total-area__row-value">
                <span class="ti-total-area__row-number">22</span>
                {{#unless flooring}}
                    <span class="ti-total-area__row-per-pack">packs of</span>
                    <span class="ti-total-area__row-quantity">6</span>
                {{else}}
                    <span class="ti-total-area__row-per-pack">packs</span>
                {{/unless}}
            </div>
        </div>
    </div>
    <div class="step1-active">
        <h3 class="ti-total-area__title">
            Your estimate total
        </h3>
        <div class="ti-total-area__wastage">
            <div class="ti-total-area__accordion-wrap">
                {{#if calc}}
                    {{> checkbox label="Include 10% wastage." id="wastage_measurement" checked="true"}}
                    <span class="ti-total-area__detail-name ti-total-area__detail-name_accordion collapsed"
                          data-toggle="collapse"
                          data-target="#ti-total-area-accordion_measurement">
                <span class="ti-total-area__detail-accordion">
                    What is this?
                </span>
                <span class="icon accordion__header-icon-small">
                <i class="fas fa-angle-up"></i>
                </span>
            </span>
                    <div class="ti-total-area__details-hidden collapse" id="ti-total-area-accordion_measurement">
                        {{> notifications withHideBtn=true warning=true
                                classModifier="notification_warning" target-id="ti-total-area-accordion_measurement"
                                text="<strong><p>10% extra tiles:</p></strong> <p>We recommend you order a minimum of 10% extra tiles in addition to those you need to complete your project.</p> <p>This is an industry standard recommendation which our experienced approved installers advise to cover any cuts and breaks which may occur during installation.</p> <p>You also avoid the risk of mismatched tile batches and incurring additional costs should you need to purchase additional tiles.</p> <p>We recommend that you keep any surplus tiles following your installation to replace any accidental damage.</p>"}}
                    </div>
                {{else}}
                    {{> checkbox label="Include 10% wastage." id="wastage" checked="true"}}
                    <span class="ti-total-area__detail-name ti-total-area__detail-name_accordion collapsed"
                          data-toggle="collapse"
                          data-target="#ti-total-area-accordion">
                            <span class="ti-total-area__detail-accordion">
                                What is this?
                            </span>
                            <span class="icon accordion__header-icon-small">
                            <i class="fas fa-angle-up"></i>
                            </span>
                        </span>
                    <div class="ti-total-area__details-hidden collapse" id="ti-total-area-accordion">
                        {{#unless flooring}}
                            {{> notifications withHideBtn=true warning=true
                                    classModifier="notification_warning" target-id="ti-total-area-accordion"
                                    text="<strong><p>10% extra tiles:</p></strong> <p>We recommend you order a minimum of 10% extra tiles in addition to those you need to complete your project.</p> <p>This is an industry standard recommendation which our experienced approved installers advise to cover any cuts and breaks which may occur during installation.</p> <p>You also avoid the risk of mismatched tile batches and incurring additional costs should you need to purchase additional tiles.</p> <p>We recommend that you keep any surplus tiles following your installation to replace any accidental damage.</p>"}}
                        {{else}}
                            {{> notifications withHideBtn=true warning=true
                                    classModifier="notification_warning" target-id="ti-total-area-accordion"
                                    text="<strong><p>10% extra floors:</p></strong> <p>We recommend you order a minimum of 10% extra floors in addition to those you need to complete your project.</p> <p>This is an industry standard recommendation which our experienced approved installers advise to cover any cuts and breaks which may occur during installation.</p> <p>You also avoid the risk of mismatched floor batches and incurring additional costs should you need to purchase additional floors.</p> <p>We recommend that you keep any surplus floors following your installation to replace any accidental damage.</p>"}}
                        {{/unless}}
                    </div>
                {{/if}}
            </div>
        </div>
        {{#unless calc}}
            <p class="ti-total-area__warning">
                Minimum total area for installation estimate is <span class="ti__warning-value">5</span>
                {{#unless flooring}}
                    <span>SQ<span class="ti-unit_big">M</span></span>
                {{else}}
                    <span><span class="ti-unit_big">m</span><sup>2</sup></span>
                {{/unless}}
            </p>
        {{/unless}}
        <div class="ti-total-area__form-row ti-total-area__form-row-mt">
            <label>
            <span class="ti-total-area__specification">
                Total area
                {{#unless flooring}}
                    <span>(sq<span class="ti-unit_small">m</span>)</span>*:
                {{else}}
                    <span>(<span class="fi__unit">m</span><sup>2</sup>):</span>
                {{/unless}}
            </span>
                {{#if calc}}
                    <input
                            id="ti_total-area-calc"
                            type="number"
                            class="ti-floor__input tbx ti-total-area__input-total"
                            name="ti-total-area">
                {{else}}
                    <input
                            id="ti_total-area"
                            type="number"
                            class="ti-floor__input tbx ti-total-area__input-total"
                            name="ti-total-area">
                {{/if}}

            </label>
        </div>
        <div class="ti-total-area__wastage-area">
          <span class="ti-total-area__specification">
            Total area with 10% wastage
              {{#unless flooring}}
                  <span>(sq<span class="ti-unit_small">m</span>)</span>:
              {{else}}
                  <span>(<span class="fi__unit">m</span><sup>2</sup>):</span>
              {{/unless}}
          </span>
            <span class="ti-total-area__wastage-value">0</span>
        </div>
        <div class="ti-total-area__form-row">
            <label>
            <span class="ti-total-area__specification">
                Quantity
                {{#unless flooring}}
                    (packs of 6):
                {{/unless}}
            </span>
                <input
                        readonly type="number"
                        class="ti-floor__input ti-total-area__input-quantity tbx"
                        name="ti-quantity"
                >
            </label>
        </div>
    </div>
</div>
<div class="ti-total-area__total">
        <span class="ti-total-area__specification">
            Total price:
        </span>
    <span class="ti-total-area__total-value">£0.00</span>
</div>

