[% META title = 'View Docs' %]

[%# WRAPPER layouts/main.tt # doesn't work - footer appears before content
	css = [ 'bootstrap-fileupload.css', 'flatpickr.min.css' ]; END %]

<!-- BEGIN [% component.name %] -->
<!-- Flatpickr JS -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    flatpickr("#datepicker", {
      dateFormat: "Y-m-d", // Adjust the format as needed (e.g., Y-m-d, d-m-Y, etc.)
      allowInput: true // Allows manual input
    });
  });
</script>
<script src="[% request.uri_base %]/javascripts/bootstrap-fileupload.js"></script>

<div class="container">
	<h1>[% title || settings.appname %]</h1>
</div>

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

[% 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 params.search 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="[% 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 description/comment/filename ...">
		  <button class="btn btn-outline-primary" type="submit">Search</button>
		  <button class="btn btn-outline-secondary" type="reset">Clear</button>
		  <a class="btn btn-primary" [% IF records; label = 'Home' %]
			  href="[% request.uri_for('/') %]"[% 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">Description</span>
	    <input type="text" class="form-control" [% IF entry.description %]
        value="[% entry.description %]" [% 'disabled' IF NOT vars.is_edit %]
        [% ELSE %]required="true"[% END %] aria-label="description"
				name="description" placeholder="" />
    </div>

	<div class="input-group flex-nowrap">
	    <span class="input-group-text col-md-2" id="keywords">Comment</span>
	    <input type="text" class="form-control" [% IF entry.comment %]
	      value="[% entry.comment %]" [% 'disabled' IF NOT vars.is_edit %]
        [% ELSE %]required="true"[% END %] aria-label="comment" name="comment"
        placeholder="" />
	</div>

	<div class="input-group flex-nowrap">
	    <span class="input-group-text col-md-2" id="date">Date</span>
	    <input type="text" id="datepicker" class="form-control"	[% IF entry.date %]
				  value="[% entry.date %]" [% 'disabled' IF NOT vars.is_edit %]
					[% ELSE %]required="true"[% END %] name="date" placeholder="Select a date" />
			<span class="input-group-text"><i class="bi bi-calendar"></i>
			</span>
	</div>

	<div class="input-group flex-nowrap">
	    <span class="input-group-text col-md-2" id="date">File</span>
			[% IF vars.is_edit;
				IF params.replace_file %]
				  <input type="file" class="form-control" name="filename" id="formFile" />
				[% ELSE %]
					<input type="text" class="form-control" name="filename"
						value="[% entry.filename %]" readonly="readonly" id="filename" />
					<span class="input-group-text">
						<a href="[% request.uri_for('/edit') %]/[% entry.id %]?replace_file=1">
						  <i class="bi bi-arrow-repeat"></i>
					  </a>
					</span>
				[% END %]
			[% ELSIF entry.size # display only, with a href (use .size in case no file) %]
			  <span class="form-control disabled">
					[% IF entry.filename %]
				  <a href="[% request.uri_for('/download') %]/[% entry.filename %]"
					  target="_blank">[% entry.filename | uri %]</a>
					[% END %]
			  </span>
			[% ELSE # new entry %]
			  <input type="file" class="form-control" name="filename" id="formFile" />
			[% END %]
  </div>
[% END # document_block %]

<div class="container">
[% IF records.size;
   SET link = vars.is_edit
     ? request.uri_for('/update/') : request.uri_for('/edit/');
  FOREACH entry IN records %]
  <form action="[% link _ entry.id %]" method="post" enctype="multipart/form-data">
    [% 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="[% request.uri_for('/service_record') %]" method="post"
			  enctype="multipart/form-data">
      [% 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>
      [% IF NOT entry.size %]
    <!-- <hr class="my-3"> // need to get title & keywords included -->
       [%# PROCESS 'upload.tt' -%]
     [% END %]
[% END %]
</div>
<!-- END [% component.name %] -->