<div class="mypage">
    <div class="mypage__nav">

        <nav class="myPageNav">
            <ul class="myPageNav__list">
                <li class="myPageNav__item myPageNav__item--main">
                    <a href="#" class="myPageNav__link myPageNav__link--main">My page top</a>
                </li>
                <li class="myPageNav__item myPageNav__item--main">
                    <a href="#" class="myPageNav__link myPageNav__link--main">Account</a>
                    <ul class="myPageNav__list myPageNav__list--sub">
                        <li class="myPageNav__item myPageNav__item--sub">
                            <a href="#" class="myPageNav__link myPageNav__link--sub">Registration information</a>
                        </li>
                        <li class="myPageNav__item myPageNav__item--sub">
                            <a href="#" class="myPageNav__link myPageNav__link--sub">Password management</a>
                        </li>
                        <li class="myPageNav__item myPageNav__item--sub">
                            <a href="#" class="myPageNav__link myPageNav__link--sub">Email reception settings</a>
                        </li>
                    </ul>
                </li>
                <li class="myPageNav__item myPageNav__item--main">
                    <a href="#" class="myPageNav__link myPageNav__link--main">Hardware</a>
                    <ul class="myPageNav__list myPageNav__list--sub">
                        <li class="myPageNav__item myPageNav__item--sub">
                            <a href="#" class="myPageNav__link myPageNav__link--sub">Product registration</a>
                        </li>
                        <li class="myPageNav__item myPageNav__item--sub">
                            <a href="#" class="myPageNav__link myPageNav__link--sub">Purchase history</a>
                        </li>
                        <li class="myPageNav__item myPageNav__item--sub">
                            <a href="#" class="myPageNav__link myPageNav__link--sub">AlphaTheta Care Extended warranty service</a>
                        </li>
                    </ul>
                </li>
                <li class="myPageNav__item myPageNav__item--main myPageNav__item--active">
                    <a href="#" class="myPageNav__link myPageNav__link--main">Recordbox</a>
                    <ul class="myPageNav__list myPageNav__list--sub">
                        <li class="myPageNav__item myPageNav__item--sub">
                            <a href="#" class="myPageNav__link myPageNav__link--sub">Contract Plan/Purchase History</a>
                        </li>
                        <li class="myPageNav__item myPageNav__item--sub">
                            <a href="#" class="myPageNav__link myPageNav__link--sub">Purchase history</a>
                        </li>
                        <li class="myPageNav__item myPageNav__item--sub">
                            <a href="#" class="myPageNav__link myPageNav__link--sub">Cloud settings</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>

    </div>

    <div class="mypage__content">
        <section class="mypage__section">
            <div class="mypage__heading">
                <h1 class="mypage__titlewrap">
                    <span>Contract plan</span>
                </h1>
            </div>

            <div class="spacer spacer--4"></div>

            <div class="mypage__block">
                <p>There is contract plan registered...</p>
                <p>Dolor purus non enim praesent elementum. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Condimentum mattis pellentesque id nibh. Dictum at tempor commodo ullamcorper. Semper risus in hendrerit gravida rutrum quisque non tellus. Diam quam nulla porttitor massa id neque aliquam. Montes nascetur ridiculus mus mauris vitae ultricies leo integer.</p>

                <div class="spacer spacer--10"></div>

                <div class="actions actions--center actions--force">
                    <div class="actions__item">

                        <a href="#" target="_blank" class="action action--normal action--on-light">
                            <span class="action__label">Register contract plan</span>
                            <span class="action__bg"></span>
                        </a>

                    </div>
                </div>
            </div>
        </section>
    </div>
</div>
<div class="mypage">
  <div class="mypage__nav">
      {{var "activeNav" "Recordbox"}}
      {{render '@nav-mypage' this merge=true }}
  </div>

  <div class="mypage__content">
    <section class="mypage__section">
      <div class="mypage__heading">
        <h1 class="mypage__titlewrap">
          <span>Contract plan</span>
        </h1>
      </div>

      <div class="spacer spacer--4"></div>

      <div class="mypage__block">
        <p>There is contract plan registered...</p>
        <p>Dolor purus non enim praesent elementum. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Condimentum mattis pellentesque id nibh. Dictum at tempor commodo ullamcorper. Semper risus in hendrerit gravida rutrum quisque non tellus. Diam quam nulla porttitor massa id neque aliquam. Montes nascetur ridiculus mus mauris vitae ultricies leo integer.</p>

        <div class="spacer spacer--10"></div>

        <div class="actions actions--center actions--force">
          <div class="actions__item">
            {{ render '@action' registerlink merge=true }}
          </div>
        </div>
      </div>
    </section>
  </div>
</div>
productlink:
  label: More info here
  class: mypage__link
  modifier: false
hardwarelink:
  label: See more
  class: mypage__link
  modifier: false
rekordboxlink:
  label: Check/change contract information
  class: mypage__link
  modifier: false
alphathetacarelink:
  label: Check/change contract information
  class: mypage__link
  modifier: false
registrationinformationlink:
  label: See more
  class: mypage__link
  modifier: false
editlink:
  label: Edit
  class: mypage__link
  modifier: false
backlink:
  label: back
  class: mypage__link
  modifier: back
registerlink:
  label: Register contract plan
  modifier: false
loadmore:
  label: Load more
  modifier: false
productregistration:
  label: + Product registration
  modifier: false
products:
  - visual:
      src: >-
        https://www.pioneerdj.com/-/media/pioneerdj/images/products/mixer/djm-v10/djm-v10-main.png?h=250&w=400&hash=B13A55D94B116CF931A83AE324726AAF90294DCF
      alt: ''
    label: DJM-V10
    serial: ABCD123456EF
    registered: false
    actions:
      - action: null
        url: ''
        label: get support
      - action: null
        url: ''
        label: Item 2
      - action: null
        url: ''
        label: Item 3
      - action: null
        url: ''
        label: Item 4
  - visual:
      src: >-
        https://www.pioneerdj.com/-/media/pioneerdj/images/products/mixer/djm-900nxs2/black/djm-900nxs2-main2.png?h=250&w=400&hash=4DA5CD8F5E2AC0FACDBDA8E3DE9FAE1EA82A1A1A
      alt: ''
    label: DJM-900NXS2
    serial: ABCD123456EF
    registered: true
    actions:
      - action: null
        url: ''
        label: get support
  - visual:
      src: >-
        https://www.pioneerdj.com/-/media/pioneerdj/images/products/dj-sampler/djs-1000/djs-1000-main.png?h=250&w=400&hash=F3C1E27C7D0070B31A79A30C0D705EF6198D03F5
      alt: ''
    label: DJS-1000
    serial: ABCD123456EF
    registered: false
    actions:
      - action: null
        url: ''
        label: get support
  - visual:
      src: >-
        https://www.pioneerdj.com/-/media/pioneerdj/images/products/mixer/djm-v10/djm-v10-main.png?h=250&w=400&hash=B13A55D94B116CF931A83AE324726AAF90294DCF
      alt: ''
    label: DJM-V10
    serial: ABCD123456EF
    registered: false
    actions:
      - action: null
        url: ''
        label: get support
  - visual:
      src: >-
        https://www.pioneerdj.com/-/media/pioneerdj/images/products/mixer/djm-900nxs2/black/djm-900nxs2-main2.png?h=250&w=400&hash=4DA5CD8F5E2AC0FACDBDA8E3DE9FAE1EA82A1A1A
      alt: ''
    label: DJM-900NXS2
    registered: false
    actions:
      - action: null
        url: ''
        label: get support

No notes defined.