Customizing the Minicart rendering

<div class="inner-component"
    data-bind="event: { mouseover: hoverMinicart, mouseout: leaveMinicart }, css: minicartClassName">
    {{ # The <div> element to show error message. }}
    {{if o_model.error_message}}
    <div class="error-message">
        {{ o_model.error_message }}
    </div>
    {{ else }}
    <div class="basket">
        {{ # The <div> element will be available upon mouse hover. }}
{{ # In case the datasource is not set fallback to the context item
              if !i_datasource 
                 i_datasource = i_item
              end
           }} 
        <div class="top-text" data-bind="css: { 'loaded-cart': cartCount() > 0 }, event: { touchend: toggleMinicart }">
            <a href="{{o_model.top_link}}" title="{{ sc_raw i_item 'View Cart Link Tooltip' }}">
                {{ sc_field i_datasource 'Top Text Label' }}
            </a>
            {{ # The <p> element displays the minicart count. }}
            <p class="cart-items-count" data-bind="text: cartCount"></p>
        </div>
        {{ # The <div>element displays the minicart lines. }}
        <div class="minicart" data-bind="with: cart">
            <!-- ko if: cartLines -->
            <div class="minicart-content" data-bind="foreach: cartLines, visible: cartLines() ? cartLines().length : 0">
                <div class="minicart-item" data-bind="attr: {'data-ajax-lineitemid': externalCartLineId}">
                    <img alt="Image" data-bind="attr:{src: image, alt: displayName}" />
                    <div class="minicart-info">
                        <h5>
                            <a data-bind="text: displayName, attr:{ href:productUrl}"></a>
                        </h5>
                        <p>
                            {{  sc_raw i_datasource 'Quantity' }} <strong data-bind="text: quantity"></strong>
                        </p>

                        <span class="price" data-bind="text: lineTotal, visible: !isFreeGift"></span>
                        <span class="freegift-label" data-bind="visible: isFreeGift">{{ sc_raw i_datasource 'Free Gift Text' }}</span>
                    </div>
                    {{ # The <span> element is used to delete the minicart line. }}
                    <span class="minicart-delete">
                        <a href="#">
                            <span data-bind="click: $parents[1].removeItem"></span>
                        </a>
                    </span>
                </div>
            </div>
            <!-- /ko -->
            {{ # The <img> element displays the loading bar image. }}
            <img class="loading-bar" data-bind="visible: $parents[0].isFetchInProgress"
                src="{{ sc_follow  i_datasource  'Loading Bar Image'  | sc_medialink }}" />

            {{ # The <div> element displays the total and the amount for a minicart line item. }}
            <div class="minicart-footer">
                <span class="minicart-total-label">{{ sc_raw i_datasource 'Total Label' }}</span>
                <span class="minicart-total-amount" data-bind="text: total"></span>
            </div>
            {{ # The <div> element contains two buttons - Checkout and Viewcart. }}
            <div class="minicart-buttons">
                {{ if !o_model.hide_checkout_button }}
                <a class="checkout-button" title="{{ sc_raw i_item 'Checkout Link Tooltip' }}"
                    href="{{ o_model.checkout_link }}">
                    {{ sc_raw i_datasource 'Checkout Link Text'  }}
                </a>
                {{ end }}
                <div>
                </div>
                <a class="view-cart-button" href="{{ o_model.view_cart_link }}"
                    title="{{ sc_raw i_item 'View Cart Link Tooltip' }}">
                    {{ sc_raw i_datasource 'View Cart Link Text' }}
                </a>
            </div>
        </div>
    </div>
    {{ # The <div> element contains two hidden fields recalculateTotals and cacheCartCount. }}
    <div class="minicart-data" style="display:none">
        <input type="hidden" value="{{ o_model.recalculate_totals }}" id="recalculateTotals" />
        <input type="hidden" value="{{ o_model.cache_cart_count }}" id="cacheCartCount" />
    </div>
    {{ end }}
</div>