• Files
• Commits
• Log
• Graph
• Stats

<!-- BEGIN [% component.name %] -->
[%# PROCESS dumper.tt dump = entry %]

[% INCLUDE alerts.tt # success & error messages %]

[% # set some variables according to next route:
    IF vars.next_route.match('edit');
        method = 'get';
        label  = 'Edit';
        disable_input = 1;
    ELSE; # search / create / update
        method = 'post';
        label  = 'Submit';
        disable_input = 0;
    END;
    # PROCESS dumper.tt dump = vars.hx_request.current_url;
    # PROCESS dumper.tt dump = vars.next_route;
    # PROCESS dumper.tt dump = disable_input;
%]

<div class="">
  <form hx-[% method %]="[% vars.hx_request.current_url _ vars.next_route %]"
        hx-target="#hx-container" id="[% vars.next_route.remove('/\d') %]">
    <div class="my-3">
      <!-- title -->
	  <div class="input-group flex-nowrap">
	    <span class="input-group-text col-md-2" id="title">Title</span>
	    <input type="text" class="form-control"
          [% IF entry.title %]value="[% entry.title %]" [% 'disabled' IF disable_input %]
          [% ELSE %]required="true"[% END %]
          aria-label="title" name="title" placeholder="">
      </div>
    <!-- created at -->
	[% IF entry.time; USE date(format = '%d/%m/%Y @ %H:%M') %]
	  <div class="input-group flex-nowrap">
		<span class="input-group-text col-md-2 id="title">Created</span>
	    <input type="text" class="form-control" [% 'disabled' IF disable_input %]
          aria-label="created" value="[% date.format(entry.time) %] [#[% entry.id %]]">
	  </div>
    [% END %]
    <!-- content -->
    [% IF disable_input %]
      <div id="content">[% entry.content | html %]</div>
    [% ELSE %]
      <div class="mb-3">
        <textarea class="form-control" id="content" rows="5" name="content"
			  required="true">[% entry.content %]</textarea>
	  </div>
    [% END %]
    </div>

    <div class="my-3">
      <button type="submit" class="btn btn-outline-primary">[% label %]</button>
      <button type="reset"  class="btn btn-outline-secondary">Clear</button>
    </div>

  </form>
</div>

<!-- // resize textarea on page load -->
<script type="text/javascript">
  $(function () {
    function autoSize(el) {
        el.style.height = 'auto';
        el.style.height = el.scrollHeight + 'px';
    }
    // resize on input
    $('#content').on('input', function () { autoSize(this); });
    // 🔑 resize immediately on page load
    autoSize(document.getElementById('content'));
  });
</script>
<!-- END [% component.name %] -->