{% extends "base" %}

{% block title %}
pastor - gui
{% endblock title %}

{% block content %}

<div class="gui">
    <h1><a href="/">pastor</a> - gui</h1>

    <textarea name="paste-content" form="paste-form-paste" placeholder="Paste text here…"></textarea>
    <form action="/?from_gui=true" id="paste-form-paste" method="POST" enctype="multipart/form-data"></form>
    <form action="/?from_gui=true" id="paste-form-file" method="POST" enctype="multipart/form-data"></form>
    <div class="buttons">
        <input id="submit-paste" type="submit" value="Submit paste" form="paste-form-paste">
        <p>or</p>
        <div class="file-area-outer">
          <div class="file-area">
              <input id="input_file" name="paste-content" type="file" form="paste-form-file" required="required">
              <div class="file-dummy">
                  <span class="default">Click to select file, or drag it here</span>
                  <span class="success">File is selected, hover for name</span>
              </div>
          </div>
          <input id="submit-file" type="submit" value="Submit file" form="paste-form-file">
        </div>
    </div>
</div>

<script>
  const submitPaste = document.getElementById("submit-paste");
  submitPaste.setAttribute("disabled", true);

  const submitFile = document.getElementById("submit-file");
  submitFile.setAttribute("disabled", true);

  function handleTextAreaChange(e) {
    const content = e.target.value;
    if (content.length === 0) {
      submitPaste.setAttribute("disabled", true);
    } else {
      submitPaste.removeAttribute("disabled");
    }
  }

  function handleInputFileChange(e) {
    const filePath = e.target.value;
    const fileSize = e.target.files[0].size;

    if (filePath.length !== 0 && fileSize !== 0) {
      submitFile.removeAttribute("disabled");
    } else {
      submitFile.setAttribute("disabled", true);
    }
  }

  const textArea = document.querySelector("textarea");
  textArea.oninput = handleTextAreaChange;

  const inputFile = document.getElementById("input_file");
  inputFile.onchange = handleInputFileChange;
</script>

{% endblock content %}