[% META title = 'View Docs' %]
<!-- BEGIN [% component.name %] -->
<h1>[% title %]</h1>

[%# USE DataPrinter; DataPrinter.dump_html(entry) %]

[% IF vars.input_error # after 'forward' %]
  <div class="alert alert-warning" role="alert">[% vars.input_error %]</div>
[% ELSIF deferred.input_success # after 'redirect' %]
  <div class="alert alert-success" role="alert">Input sucess ...</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="[% request.uri_for('/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/keywords/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" href="[% request.uri_for('/') %]"
			role="button">New Entry</a>
		</div>
	  </div>
	</div>
  </form>
</div>
<!-- END search bar -->

<hr class="my-3">

[% BLOCK document_block %]
  <div class="container">
    <form action="[% request.uri_for('/new_document') %]" method="post">
	  <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 [% ELSE %]required="true"[% END %]
		  aria-label="title" name="title" placeholder="">
	  </div>

	  <div class="input-group flex-nowrap">
	    <span class="input-group-text col-md-2" id="keywords">Keywords</span>
	    <input type="text" class="form-control" [% IF entry.keywords %]
	      value="[% entry.keywords %]" disabled [% ELSE %]required="true"[% END %]
		  aria-label="keywords" name="keywords" placeholder="comma-separated list">
	  </div>

	    <!-- <label for="content" class="form-label">Content</label> -->
	    [% IF entry.content %]
		  [% 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) %]">
		  </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"></textarea>
		  </div>
	    [% END %]

    [% IF NOT records %]
	  <div>
		  <button type="submit" class="btn btn-outline-primary">Submit</button>
		  <button type="reset"  class="btn btn-outline-secondary">Clear</button>
	  </div>
	[% END %]
	</form>
  </div>
[% END # document_block %]

[%
	IF records; FOREACH entry IN records; PROCESS document_block; END;
    ELSE; PROCESS document_block %]
      [% IF NOT entry.size %]
    <!-- <hr class="my-3"> // need to get title & keywords included -->
       [%# PROCESS 'upload.tt' -%]
  [% END %]
[% END %]
<!-- END [% component.name %] -->