$(document).on('page:beforein', '.page[data-name="c1"]', async function (e) {

  console.log('c1 ready')

  var cId = e.detail.route.params.id

  //console.log(cId)

  let js = JSON.parse(localStorage.getItem('s23_data_item'));

  let dt = js.c1[cId];  

  console.log(dt.data)

  let strTitle=dt.jenis;

  //console.log(strTitle)

  $$("#c1_title").html(strTitle);



  let strHtml = `

    <div class="separator-large"></div>

    <div class="container">`;

  for(let a=0;a<dt.data.length;a++) {

  let el=dt.data[a];

    strHtml += `

    <div class="row">

      <div class="col-50">

        <div class="content-item radius-default bg-white">

          

          <a href="/item/`+cId+`/`+el.id+`/" data-c1="`+cId+`" data-id="`+el.id+`">

            

            <div class="text-desc">

              <p class="title-item">`+el.bobot+`kg</p>

              <p class="price-item"><sup>Rp</sup>`+el.price_idr_s+`<sup>Jt</sup></p>

              <p class="location-item">

                <i class="icon material-symbols-outlined">location_on</i>

                `+el.posisi+`

              </p>

            </div>

          </a>

        </div>

      </div>

      <div class="col-50">

        <div class="content-item radius-default bg-white">

          <a href="" data-transition="f7-dive">

            <!--<div class="favorite-symbol active-symbol">

              <ion-icon name="heart-outline" role="img" class="md hydrated"></ion-icon>

            </div>-->

          </a>

          <a href="/ads-details/">

            <img class="full-width radius-top-only" src="`+el.img+`" alt="`+el.title+`">

          </a>

        </div>

      </div>

    </div>`;

  }

  strHtml += `</div>`;

  $$("#c1_content").html(strHtml); 

  

});