<form id="op_config" class="form-inline" style="margin-bottom: 0px;" method="post">
<input id="csrf" name="csrf" type="hidden" value="{{ csrf }}"/>
<table class="table table-bordered table-striped">

<tr>
<th> {{ i18n("observation_point_alias") }} </th>
   <td>
      <input type="text" name="custom_name" class="form-control" placeholder="{{ custom_name }}" style="width: 280px;" value="{{ custom_name }}" id="observation_point_alias">
   </td>
</tr>
            

   
</table>
   <button class="btn btn-primary" style="float:right; margin-right:1em; margin-left: auto" disabled="disabled" type="submit" id="save"> {{ i18n("save_settings") }} </button><br><br>
   </form>
   <script>
     aysHandleForm("#op_config");
   </script>


</table>



<script>
   $(document).ready(function(){
      const PAGE_CSRF = "{{ csrf }}";   

      $.get(`${http_prefix}/lua/rest/v2/get/observation_points/alias.lua?observation_point={{ op_id }}`);

      $(`.btn-primary`).click(function(){   
         let input_text = document.getElementById(`observation_point_alias`).value;

         $.post(`${http_prefix}/lua/rest/v2/set/observation_points/alias.lua`,
         {
            csrf: PAGE_CSRF,
            alias: input_text,
            observation_point: {{ op_id }}
         });
      });

   });

</script>