<div class="tc-generic">
    <div class="tc-generic__main">
        <div class="tc-generic__estimate">

            <div class="tc__estimate">
                <div class="tc__floors">

                <div class="tc-floor__measurement">
                    <div class="row">
                        <h4 class="tc-floor__title">
                        Select unit of measurement
                        </h4>
                        <div class="tc-floor__dpd">
                        <div class="form-row {{#if error}}form-row_validation-error{{/if}} {{row-mod}}"
                                {{#if required}}data-row-required{{/if}} data-form-field>
                            <label class="form-row__label {{#if required}}form-row__label_required{{/if}} {{#if
                                    label-hidden}}sr-only{{/if}}" for="{{id}}">{{label}}</label>
                            {{#if info}}
                            <div class="form-row__info">{{info}}</div>
                            {{/if}}
                            <div class="form-row__field">
                            <div class="ddn {{mod}} {{#if error}}ddn_error{{/if}}">

                                <select class="unit-selection" name="{{id}}" {{#if disabled}}disabled{{/if}}>
                                    <option>Metres/millimetres</option>
                                    <option>Feet/inches</option>
                                </select>
                                <span class="icon">
                                    <i class="fas fa-chevron-down"></i>
                                </span>

                            </div>
                            {{#if infoIcon}}
                                {{> info-icon modification="icon-info" title=infoIcon data-container=(concat "." infoIcon-uid)  data-placement="top"}}
                            {{/if}}
                            </div>
                            {{#if error}}
                            <div class="form-row__error">{{error}}</div>
                            {{/if}}
                        </div>
                        </div>
                    </div>
                </div>

                </div>
            </div>
        </div>

        <div class="tc-generic__estimate">
            <div class="tc__estimate">
                <div class="tc__floors">
                {{> tc-generic-floor }}
                {{> tc-generic-floor addFloor=true }}
                </div>
            </div>
        </div>

        <div class="tc-generic__estimate">
            <div class="tc__estimate">
                <div class="tc__floors">
                    {{> tc-generic-floor tile="true"}}
                </div>
            </div>
        </div>

        <div class="tc-generic__estimate">
            <div class="tc__estimate">
                <div class="tc__floors">
                    <div class="tc-floor__wastage">

                        <div class="tc__wastage">
                            <div class="tc__accordion-wrap">
                            {{> checkbox label="Include 10% wastage." id="wastage_measurement" checked="true"}}
                            <span class="tc__wastage__detail-name tc__wastage__detail-name_accordion collapsed"
                                    data-toggle="collapse"
                                    data-target="#tc-accordion_measurement">
                                    <span class="tc__wastage__detail-accordion">
                                        What is this?
                                    </span>
                                    <span class="icon accordion__header-icon-small">
                                        <i class="fas fa-angle-up"></i>
                                    </span>
                                </span>
                            <div class="tc__wastage__details-hidden collapse" id="tc-accordion_measurement">
                                {{> notifications withHideBtn=true warning=true
                                        classModifier="notification_warning" target-id="tc-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>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <button class="tc-generic__calc-btn btn btn-primary btn_large">
            <span class="btn__text">
                Calculate
            </span>
        </button>
    </div>

    <div class="tc-generic__right-side">
        <div class="tc-generic__right-side-block">
            <h3>Your Results</h3>

            <div class="tc-result">
                <h5 class="tc-result__total">Total area (<span class="tc-unit_small-total-aria">sqm</span>):</h5>
                <div class="tc-result__sqm">
                    <span id="tc_total-area" class="tc-floor__result-value-SQM">0</span>
                    <span class="tc-unit_big-total-aria">SQM</span>
                </div>
            </div>

            <div class="tc-result">
                <h5 class="tc-result__total">No of tiles required:</h5>
                <div class="tc-result__sqm"><span class="tc-floor__result-value-tiles">0</span> Tiles</div>
            </div>
        </div>
    </div>
</div>
