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

  console.log('app item_detail ready')

  var cat = e.detail.route.params.cat;

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



  //console.log(id + ', ' + cat);  

  let dt2 = get_localstorage('byid');

  let dt = dt2.data;

  //console.log(dt)

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

    if(dt[a].id == id) {

      let item = dt[a];

      //console.log(item)

      let top_img = `

<div class="card-image">

  <img src="${item.img}" id="item_img_${dt.id}" alt="">

</div>`;

      let content = ``;

      content += `<h1>${item.title}</h1>`;

      content += top_img;

  if(item.section) {

      content += `<p class="single-post-category">${item.section}</p>`;

  }    

      content += `<p class="lead mt-12 mb-12">${item.summary}</p>`;

      content +=`

<div class="slidecontainer">

  <input onChange="changeSize('myText')" type="range" min="12" max="20" value="15" class="size-slider" id="myRange">  

</div>      `;

      content += `<span id="bodytext" class="fz-15">${item.bodytext}</span>`;

      content += `<h3>Tag</h3>`;

      content += `<p>${item.tag}</p>`;

      $("#ptitle_item_detail").html(item.site);

      $("#ptitle_large_item_detail").html('<span class="single-post-channel">'+item.site+'</span>');

      $("#item_detail_content").html(content);

    }

  }

});