@{section header}

<title>  پیوند ها </title>
<style>
  .more{position: absolute;bottom:-14px;left:50%;transform: translateX(-50%);cursor: pointer;}
  .del{position: absolute;top:-14px;left:-15px;cursor: pointer;}
</style>
@{end}




<div class="Hrow Hpadd-1per">
  <form id="frm_links" class="Hform-V1 Hpadd-15 Hbg-white Hround-10" style="max-width:900px;margin:auto;box-shadow:0px 0px 5px #ddd;overflow:auto;" name="frm_links" action="" method="post" enctype="text/plain" >
    <h3 data-color="#777">پیوند ها : 
      <span class="more fas fa-plus Hround-40 HpaddT-5 HpaddB-5 HpaddR-7 HpaddL-7" style="position:relative;left:0;bottom:0;color:#fff;background:#66cd42"></span>
    </h3>
    
    @{if model}
      @{foreach m in model}
        <div class="Hrow HmarT-10 HmarB-10 HpaddT-10 HpaddB-20 HpaddR-20 HpaddL-20 links-box" style="border:1px dashed #555;">
          <label class="Hrow" style="font-size: small;" style="color:#aaa">تیتر : </label>
          <input class="Hrow Htxt-center HmarB-10" type="text" value="@{m.k}" name=""/> 
          <label class="Hrow" style="font-size: small;" style="color:#aaa">لینک : </label>
          <input class="Hrow Htxt-center" style="direction: ltr;" type="text" value="@{m.v}" name=""/> 
          <span class="more fas fa-plus Hround-40 Hpadd-5" style="color:#fff;background:#66cd42"></span>
          <span class="del fas fa-times Hround-40 HpaddT-7 HpaddB-7 HpaddR-10 HpaddL-10"  style="color:#fff;background:#cd0000"></span>
        </div>
      @{end}
    @{fi}
    <input  class="trans0_25 Hbtn-fullfix Hbtn-yellow2  HmarT-40 Hpadd-15"  type="button" id="INSup" data-action=""  value="ویرایش پیوندها" />

      <input type="hidden" value="0" name="index" id="index"/>
      </form>
</div>



@{section footer}



<script type="text/javascript">
  function show_res(result){   
    switch(result.status){
        case 200:
            window.location.assign(""); 
        break;
        default:
            Hnotification({status:"warning",Ttext:"",Ctext:result.message});    
    }
}

$(document).on("click",".more",function(){
  var obj='<div class="Hrow HmarT-10 HmarB-10 HpaddT-10 HpaddB-20 HpaddR-20 HpaddL-20 links-box" style="border:1px dashed #555;"><label class="Hrow" style="font-size: small;" style="color:#aaa">تیتر : </label><input class="Hrow Htxt-center HmarB-10" type="text" value="" name=""/> <label class="Hrow" style="font-size: small;" style="color:#aaa">لینک : </label><input class="Hrow Htxt-center" style="direction: ltr;" type="text" value="" name=""/> <span class="more fas fa-plus Hround-40 Hpadd-5" style="color:#fff;background:#66cd42"></span><span class="del fas fa-times Hround-40 HpaddT-7 HpaddB-7 HpaddR-10 HpaddL-10"  style="color:#fff;background:#cd0000"></span></div>';
  $(this).parent().after(obj);
});

$(document).on("click",".del",function(){
  $(this).parent().remove();
});



$(document).ready(function(){
 
  $("#INSup").click(async function(){
        var c=1;
        $(".links-box").each(function(){
          $(this).children().eq(1).attr("name",`titr${c}`);
          $(this).children().eq(3).attr("name",`link${c}`);
          c++;
        });
        $("#index").val($(".links-box").length);
        var formdata=new FormData(frm_links);
        var result=await jqajax("/links",formdata,"post","loader");  
        show_res(result);
    
});
});
</script>
@{end}