<!-- BEGIN [% component.name %] -->
[%# PROCESS dumper.tt dump = entry %]
[% INCLUDE alerts.tt # success & error messages %]
[%
# set label to 'Edit' if next route is 'edit', otherwise 'Submit':
SET label = vars.next_route.match('edit') ? 'Edit' : 'Submit';
# disable input fields if next route is 'edit':
SET disable_input = vars.next_route.match('edit') ? 1 : 0;
# 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-post="[% 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 %] -->