[%# META title = 'View Docs' %]
<!-- BEGIN [% component.name %] -->
<div class="container">
	<h1>InfoLib</h1>
</div>

[% # USE DataPrinter;
	 #DataPrinter.dump_html(request.route.prefix);
%]

[% IF vars.input_error # after 'forward' %]
  <div class="container alert alert-warning" role="alert">[% vars.input_error %]</div>
[% ELSIF deferred.input_success # after 'redirect' %]
  <div class="container alert alert-success" role="alert">Input success ...</div>
[% END %]

[% IF records AND NOT records.size # no records found %]
  <div class="container alert alert-info" role="alert">
		No records found matching "[% params.search %]"</div>
[% END %]

<script type="text/javascript">
    $('#content').on('input', function () {
        this.style.height = 'auto';
		this.style.height = (this.scrollHeight) + 'px';
    });
</script>

<!-- BEGIN search bar -->
<div class="container">
  <form action="[% uri_for_section.infolib.search %]" method="post">
    <div class="row">
	  <div class="col-md-8">
	    <div class="input-group">
		  <input type="text" class="form-control search-input" name="search"
			  placeholder="Search title/content ...">
		  <button class="btn btn-outline-primary" type="submit">Submit</button>
		  <button class="btn btn-outline-secondary" type="reset">Clear</button>
		  <a class="btn btn-primary" [% IF records; label = 'Home' %]
			  href="[% uri_for_section.infolib.home %]"[% ELSE; label = 'New Entry' %]
			  data-bs-toggle="collapse" data-bs-target="#newEntry"[% END %]
			  role="button">[% label %]</a>
		</div>
	  </div>
	</div>
  </form>
</div>
<!-- END search bar -->

[% BLOCK document_block %]
	<hr class="my-3">

	<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 NOT vars.is_edit %]
         [% ELSE %]required="true"[% END %] aria-label="title" name="title"
         placeholder="">
    </div>

	[% IF entry.content AND NOT vars.is_edit;
	   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 aria-label="created"
			      value="[% date.format(entry.time) %] [#[% entry.id %]]">
	  </div>
      <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 %]
[% END # document_block %]

<div class="container">
[% IF records;
     FOREACH entry IN records;
				SET uri = vars.is_edit
					? uri_for_section.infolib.update : uri_for_section.infolib.edit;
  %]
  <form action="[% uri %]/[% entry.id %]" method="post">
    [% PROCESS document_block %]
      <p></p>
      <div>
        <button type="submit" class="btn btn-outline-primary">
           [% SET label = vars.is_edit ? 'Submit' : 'Edit'; label %]</button>
      </div>
  </form>
  [% END # foreach entry in records %]
  [% ELSE # not records %]
  <div class="collapse" id="newEntry">
    <form action="[% uri_for_section.infolib.new %]" method="post">
      [% PROCESS document_block %]
      <div>
        <button type="submit" class="btn btn-outline-primary">Submit</button>
        <button type="reset"  class="btn btn-outline-secondary">Clear</button>
      </div>
    </form>
  </div>
[% END %]
</div>
<!-- END [% component.name %] -->