{% extends "base.html" %} {% block title %}Home{% endblock %} {% block content%}
<h1 align="left">JavaScript Projects</h1>

<div class="container mt-5">
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">Contact Us</button>
  <div class="modal" id="myModal">
      <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-header">
                  <h5 class="modal-title">Contact Us</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
              </div>
              <div class="modal-body">
                  <form action="/send-idea" method="POST">
                      <div class="mb-3">
                          <label  class="form-label required">Name</label>
                          <input name="contact-name" id="contact-name" type="text" class="form-control">
                      </div>
                      <div class="mb-3">
                          <label  class="form-label required">Email</label>
                          <input name="contact-email" id="contact-email" type="email" class="form-control">
                      </div>
                      <div class="mb-3">
                          <label class="form-label required">Type your message here</label>
                          <textarea name="contact-message" id="contact-message" class="form-control"></textarea>
                      </div>
                    </div>
                    <div class="modal-footer">
                        <button  type="submit" nam="idea" id="idea" class="btn btn-primary" >Submit</button>
                    </div>
                  </form>
              
          </div>
      </div>
  </div>
</div>

<h4 align="center">Project Ideas</h4>
<ul class="list-group" >
  <li class="list-group-item">
    <a href="https://hackr.io/blog/javascript-projects#7-javascript-photo-details-display" target="_blank">JavaScript Photo Details Display</a>
  </li>
  <li class="list-group-item">
    <a href="https://hackr.io/blog/javascript-projects#4-javascript-weather-app" target="_blank">JavaScript Weather App</a>
  </li>
  <li class="list-group-item">
    <a href="https://hackr.io/blog/javascript-projects#8-build-an-interactive-landing-page" target="_blank">Build an Interactive Landing Page</a>
  </li>
</ul>



<h4 align="center">Notes</h4>
<ul class="list-group list-group-flush" id="notes">
  {% for note in user.notes %}
  <li class="list-group-item">
    {{ note.data }}
    <button type="button" class="close" onClick="deleteNote({{ note.id }})">
      <span aria-hidden="true">&times;</span>
    </button>
  </li>
  {% endfor %}
</ul>
<form  action="/" method="POST">
  <textarea name="note" id="note" class="form-control"></textarea>
  <br />
  <div align="center">
    <button type="submit" class="btn btn-primary">Add Note</button>
  </div>
</form>
<form action="/upload-file"enctype="multipart/form-data" method="POST">
  <input id="file" type="file"  name="file">
  <input type="submit" class="btn btn-primary" value="upload">
</form>

<ul class="list-group list-group-flush" id="files">
  {% for file in user.files %}
  <li class="list-group-item">
    <a action="/download"href={{ url_for('views.download', id= file.id )}}>{{ file.name }}</a>
    <button type="button" class="close" onClick="deleteFile({{ file.id }})">
      <span aria-hidden="true">&times;</span>

  </li>
  {% endfor %}
</ul>


{% endblock %}