Order Summary: Not Editable Boxes Card

<div class="summary-card {{ custom_class }}" style="margin: 16px;">
  <div class="heading">
    <h2>
      {% if type === 'moving-card' %}Moving details{% endif %}
      {% if type === 'boxes-card' %}Moving boxes{% endif %}
      {% if type === 'payment-card' %}Payment method{% endif %}
      {% if type === 'moveasy-card' %}MovEasy insurance{% endif %}
    </h2>
    <div class="side-nav">
      {% if editable %}
        <div class="nav-btn cancel-btn">Cancel</div>
        <div class="nav-btn save-btn">Save Changes</div>
      {% else %}
        <div class="material-icons">edit</div>
      {% endif %}
    </div>
  </div>
  <div class="body">
    {% if type === 'moving-card' %}
      <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-3 movu-spacing-16-bottom">
          <div class="column-heading">Service date</div>
          <div class="column-text">21.02.2021</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 movu-spacing-16-bottom">
          <div class="column-heading">Company name</div>
          <div class="column-text">Express Umzug AG</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 movu-spacing-16-bottom">
          <div class="column-heading">Service address</div>
          <div class="column-text">Strickstrasse 64, 8006 Zürich</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 movu-spacing-16-bottom">
          <div class="column-heading">New address</div>
          <div class="column-text">Universitätstrasse 63, 8006 Zürich</div>
        </div>
      </div>
      {% if editable %}
        <div class="row mt-16-desktop">
          <div class="col-xs-12 col-sm-6">
            <div class="column-heading">Additional services</div>
            <div class="checkbox-holder">
              {% render '@checkbox--checked', { checkboxText: 'Box packing'}, true %}
            </div>
            <div class="checkbox-holder">
              {% render '@checkbox--checked', { checkboxText: 'Dissasembling/Assembling furniture'}, true %}
            </div>
            <div class="checkbox-holder">
              {% render '@checkbox--checked', { checkboxText: 'Additional service with a long name'}, true %}
            </div>
            <div class="checkbox-holder">
              {% render '@checkbox--checked', { checkboxText: 'Additional service with a long name'}, true %}
            </div>
          </div>
        </div>
      {% else %}
        <div class="row mt-16-desktop">
          <div class="col-xs-12 col-sm-6">
            <div class="column-heading">Additional services</div>
            <div class="small">Balcony cleaning, Washing rugs, Bathtub descaling, Additional service, Additional service with a long name</div>
          </div>
        </div>
      {% endif %}
    {% endif %}
    {% if type === 'boxes-card' %}
      <div class="row">
        <div class="col-sm-12 col-md-3 movu-spacing-16-bottom">
          <div class="column-heading">Boxes</div>
          <div class="column-text">120 pieces</div>
        </div>
        <div class="col-sm-12 col-md-6 movu-spacing-16-bottom">
          <div class="column-heading">Shipping</div>
          <div class="column-text">Free and shipped within 2 days</div>
        </div>
      </div>
      {% if editable %}
      <div class="row mt-16-desktop">
        <div class="col-sm-12 col-md-3 hidden-xs">
          <div class="column-heading spinner-heading">Amount</div>
          <movu-counter-spinner steps="1" ></movu-counter-spinner>
          <div class="small in-stock">In stock</div>
        </div>
        <div class="col-sm-12 col-md-3 visible-xs">
          <div class="column-heading spinner-heading">Amount</div>
          <movu-counter-spinner steps="1" small></movu-counter-spinner>
          <div class="small in-stock">In stock</div>
        </div>
      </div>
      {% endif %}
    {% endif %}
    {% if type === 'payment-card' %}
      <div class="row">
        <div class="col-sm-12 col-md-3 movu-spacing-16-bottom">
          <div class="column-heading">Payment type</div>
          <div class="column-text">Invoice</div>
        </div>
        <div class="col-sm-12 col-md-9">
          <div class="column-heading">Invoice address</div>
          {% if editable %}
            <div class="radio-btn-item movu-spacing-8-bottom">
              {% render '@radio-button', { radioBtnText: 'Same as service address', className: 'radio-btn radio', radioBtnDescription: 'Mr. Andrej Balint, Universitätstrasse 63, 8006 Zürich'}, true %}
            </div>
            <div class="radio-btn-item movu-spacing-16-bottom">
              {% render '@radio-button--checked', { radioBtnText: 'Choose different name', className: 'radio-btn radio'}, true %}
            </div>
            <div class="gray-box gray-box-negative-margins">
              <div class="row">
                <div class="col-xs-12">
                  <div class="radio-btn-inline radio-btn-bold movu-spacing-24-bottom">
                    {% render '@radio-button--checked', { radioBtnText: 'Private Address'}, true %}
                  </div>
                  <div class="radio-btn-inline radio-btn-bold movu-spacing-24-bottom">
                    {% render '@radio-button', { radioBtnText: 'Company Address'}, true %}
                  </div>
                </div>
              </div>
              <div class="row movu-spacing-16-bottom mt-16-mobile">
                <div class="col-xs-12">
                  <div class="radio-btn-inline">
                    {% render '@radio-button--checked', { radioBtnText: 'Mr'}, true %}
                  </div>
                  <div class="radio-btn-inline">
                    {% render '@radio-button', { radioBtnText: 'Ms'}, true %}
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-xs-12 col-lg-6 margin-20-bottom text-size padding-right-reduced-desktop">
                  {% render '@text-input', { textName: 'First Name', placeholder: 'First Name', errors: true }, true %}
                </div>
                <div class="col-xs-12 col-lg-6 margin-20-bottom text-size padding-left-reduced-desktop">
                  {% render '@text-input', { textName: 'Last Name', placeholder: 'Last Name', errors: true }, true %}
                </div>
              </div>
              <div class="row">
                <div class="col-xs-12">
                  <movu-address is_full="true" city_placeholder_txt="City" street_placeholder_txt='Street and No.' zip_placeholder_txt='Zip'></movu-address>
                </div>
              </div>
              <movu-button flat text="Add address" primary></movu-button>
            </div>
          {% else %}
            <div class="column-text">Same as service address</div>
            <div class="small column-description">Mr. Andrej Balint, Universitätstrasse 63, 8006 Zürich</div>
          {% endif %}
        </div>
      </div>
    {% endif %}

    {% if type === 'moveasy-card' %}
      <div class="row">
        <div class="col-xs-12 movu-padding-8-bottom no-padding-bottom-xs">
          <div class="column-text">Insurance services will be charged separately and directly by Baloise.</div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-3 movu-spacing-16-top">
          <div class="column-heading">Insurance</div>
          {% if editable %}
            {% render '@checkbox--checked', { checkboxText: 'All risk insurance'}, true %}
          {% else %}
            <div class="column-text">All risk insurance</div>
          {% endif %}
        </div>
        <div class="col-xs-12 col-sm-12 col-md-6 movu-spacing-16-top movu-spacing-16-bottom-desk">
          <div class="column-heading">Insurance address</div>
            <div class="column-text">Same as service address</div>
            <div class="small column-description">Mr. Andrej Balint, Universitätstrasse 63, 8006 Zürich</div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-3 movu-spacing-16-bottom movu-spacing-16-top">
          <div class="column-heading">Name</div>
          <div class="column-text">Andrej Balint</div>
        </div>
        <div class="col-xs-12">
          <div class="gray-box">
            <h4 class="movu-spacing-8-bottom">Birthday</h4>
            <div class="row">
              <div class="col-xs-12 col-sm-4 col-md-2 padding-right-reduced-tablet">
                <movu-dropdown placeholder_text='Day' items='[{"id":"1","name":"Day 1"},{"id":"2","name":"Day 2"}, {"id":"3","name":"Day 3"}]'></movu-dropdown>
              </div>
              <div class="col-xs-12 col-sm-4 col-md-2 padding-left-reduced-tablet padding-right-reduced-tablet">
                <movu-dropdown placeholder_text='Month' items='[{"id":"1","name":"Month 1"},{"id":"2","name":"Month 2"}, {"id":"3","name":"Month 3"}]'></movu-dropdown>
              </div>
              <div class="col-xs-12 col-sm-4 col-md-2 padding-left-reduced-tablet">
                <movu-dropdown placeholder_text='Year' items='[{"id":"1","name":"Year 1"},{"id":"2","name":"Year 2"}, {"id":"3","name":"Year 3"}]'></movu-dropdown>
              </div>
            </div>
          </div>
        </div>
      </div>
    {% endif %}
  </div>
  {% if editable %}
    <div class="footer">
      <div class="nav-btn cancel-btn">Cancel</div>
      <div class="nav-btn save-btn">Save Changes</div>
    </div>
  {% endif %}
</div>