{% extends "layouts/default.html" %}
{% block title %}Create a new archive entry{% endblock %}
{% block content %}
<div class="be-main">
    <h1>Create Archive Entry</h1>

    <div class="be-quicklist">
	<a class="be-gui-link"
	   title="Click to view your Dashboard"
	   href="/dashboard">
	    <img alt="Dashboard"
		 src="/images/icons/dashboard.png">
	    View Dashboard
	</a>
	<a class="be-gui-link"
	   title="Click to view all archive entries stored on the system"
	   href="/user/archive">
	    <img alt="Archive Index"
		 src="/images/icons/index.png">
	    Archive Index
	</a>
	<a class="be-gui-link"
	   title="Click to view files in Storage"
	   href="/storage/manage">
	    <img alt="Storage Index"
		 src="/images/icons/index.png">
	    Storage Index
	</a>
	<a class="be-gui-link"
	   title="Click to view your Pages Index"
	   href="/user/pages">
	    <img alt="Pages Index"
		 src="/images/icons/index.png">
	    Pages Index
	</a>
    </div>

<script src="/js/tinymce/tinymce.min.js" referrerpolicy="origin"></script>

<script>
  tinymce.init({
      selector: '#mytextarea',
      plugins: [
	  'advlist', 'autolink', 'lists', 'link', 'image', 'charmap',
	  'emoticons', 'preview', 'anchor', 'searchreplace', 'visualblocks',
	  'fullscreen', 'insertdatetime', 'media', 'save', 'table', 'help',
	  'visualchars', 'wordcount', 'quickbars', 'pagebreak', 'nonbreaking',
	  'importcss', 'directionality', 'codesample', 'code', 'autosave',
	  /* 'autoresize' */
      ],
      toolbar: 'undo redo | save | formatpainter casechange blocks | bold italic backcolor | ' +
          'alignleft aligncenter alignright alignjustify | ' +
          'bullist numlist checklist outdent indent | removeformat | a11ycheck code table help'
  });
</script>

<form class="be-gui-form"
      action="/create/archive-entry"
      method="post"
      enctype="multipart/form-data">
    <input required
	   type="hidden"
	   name="AUTHENTICITY-TOKEN"
	   value="{{token}}">
    <label>Title</label>
    <input required
           type="text"
	   placeholder="Enter title here..."
	   name="TITLE"
	   value="{{title}}">
    <div class="be-gui-form-row">
        <label>Month</label>
        <select required name="MONTH">
            <option value=""
                    selected
                    disabled
                    hidden>
                Select Month
            </option>
            <option>January</option>
            <option>February</option>
            <option>March</option>
            <option>April</option>
            <option>May</option>
            <option>June</option>
            <option>July</option>
            <option>August</option>
            <option>September</option>
            <option>October</option>
            <option>November</option>
            <option>December</option>
        </select>
        <label>Year</label>
        <input required
               type="number"
	       placeholder="The year the artwork was published..."
	       name="YEAR"
	       value="{{year}}">
    </div>
    <br>
    <label>Search Keywords</label>
    <p class="be-gui-form-hint">
        Use a comma to seperate keywords (E.G. 'art,welding,green paint,metal').
        Words seperated by a space and not a comma are marked as one keyword.
        So, 'green paint' is one keyword not two in this example.
    </p>
    <input type="text"
	   name="KEYWORDS"
	   placeholder="Example: art,welding,green paint,metal"
	   value="{{keywords}}">
    <label>Thumbnail</label>
    <input required
	   type="file"
	   name="THUMBNAIL-FILE">
    <textarea name="PAGE-CONTENT"
	      id="mytextarea"
	      placeholder="Enter archive content here...">
    {{data}}
    </textarea>
    <!-- <input type="submit" value="Save Page"> -->
</form>
</div>
{% endblock %}