{{define "user/canned.html"}}
{{template "user/layout_head" .}}
{{template "user_pagehead" (dict "Icon" "bx-message-detail" "Title" (T "user.canned.title") "Desc" (T "user.canned.desc"))}}
<div class="row g-3">
  <div class="col-lg-5">
    <div class="card border-0 shadow-sm p-3">
      <h2 class="h6 fw-bold">{{T "user.canned.form_title"}}</h2>
      <input type="hidden" id="cannedId" value="0">
      <div class="mb-2"><label class="form-label small">{{T "user.canned.field_title"}}</label><input class="form-control form-control-sm" id="cannedTitle" maxlength="128"></div>
      <div class="mb-2"><label class="form-label small">{{T "user.canned.field_shortcut"}}</label><input class="form-control form-control-sm" id="cannedShortcut" placeholder="/hello" maxlength="32"></div>
      <div class="mb-2"><label class="form-label small">{{T "user.canned.field_content"}}</label><textarea class="form-control form-control-sm" id="cannedContent" rows="5" maxlength="2000"></textarea></div>
      <button type="button" class="btn btn-primary btn-sm" id="btnSaveCanned">{{T "user.canned.save"}}</button>
      <button type="button" class="btn btn-link btn-sm" id="btnResetCanned">{{T "user.canned.clear"}}</button>
    </div>
  </div>
  <div class="col-lg-7">
    <div class="list-group shadow-sm">
      {{range index .Data "Items"}}
      <div class="list-group-item" data-id="{{.id}}" data-title="{{.title}}" data-content="{{.content}}" data-shortcut="{{.shortcut}}">
        <div class="d-flex justify-content-between gap-2">
          <div>
            <strong>{{.title}}</strong>
            {{if .shortcut}}<span class="badge text-bg-light border ms-1">{{.shortcut}}</span>{{end}}
            <div class="small text-muted text-truncate" style="max-width:28rem">{{.content}}</div>
          </div>
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-outline-secondary btn-edit">{{T "user.canned.edit"}}</button>
            <button type="button" class="btn btn-outline-danger btn-del">{{T "user.canned.delete"}}</button>
          </div>
        </div>
      </div>
      {{else}}
      <div class="list-group-item text-muted">{{T "user.canned.empty"}}</div>
      {{end}}
    </div>
  </div>
</div>
<script>
(function () {
  function resetForm() {
    $('#cannedId').val('0');
    $('#cannedTitle,#cannedShortcut,#cannedContent').val('');
  }
  $('#btnResetCanned').on('click', resetForm);
  $(document).on('click', '.btn-edit', function () {
    var $it = $(this).closest('[data-id]');
    $('#cannedId').val($it.data('id'));
    $('#cannedTitle').val($it.attr('data-title') || '');
    $('#cannedContent').val($it.attr('data-content') || '');
    $('#cannedShortcut').val($it.attr('data-shortcut') || '');
  });
  $(document).on('click', '.btn-del', function () {
    var id = $(this).closest('[data-id]').data('id');
    if (!id || !confirm({{jsString (T "user.canned.confirm_del")}})) return;
    $.post('/api/user/canned/' + id + '/delete', function (res) {
      if (res.success) location.reload();
      else alert(res.message || {{jsString (T "user.canned.fail")}});
    });
  });
  $('#btnSaveCanned').on('click', function () {
    $.ajax({
      url: '/api/user/canned', method: 'POST', contentType: 'application/json',
      data: JSON.stringify({
        id: parseInt($('#cannedId').val(), 10) || 0,
        title: $('#cannedTitle').val(),
        content: $('#cannedContent').val(),
        shortcut: $('#cannedShortcut').val()
      }),
      success: function (res) {
        if (res.success) location.reload();
        else alert(res.message || {{jsString (T "user.canned.save_fail")}});
      }
    });
  });
})();
</script>
{{template "user/layout_foot" .}}
{{end}}