<!--- Review posting page for HeelMeals
    TODO (for story 5): 
    - add form to create review
 -->
 <link href="/css/styles.css" rel="stylesheet" type="text/css">
 <a href="/app/home">
    <div class="title">
        <span class="material-symbols-outlined" style="color:white">
            lunch_dining
            </span>
        <h1 style="margin-left: 5px; margin-top: 0px">HeelMeals</h1>
    </div>
</a>

  <form action="/app/home" method="POST" enctype="multipart/form-data">
    <div class="review-form-container">
      <h2>Post Your Own Review</h2>
      <div class="review-inputs">
        <div class="text-input">
          <div style="margin-bottom: -13px;">
            <h4 style="font-weight: 400;"> <span style="color: black">Review Title</span> (Required)</h4>
          </div>
            <input class="text-input-box" type="text" name="title" placeholder="Chase has good sushi!">
        </div>
        <div class="text-input">
          <div style="margin-bottom: -13px;">
            <h4 style="font-weight: 400;"> <span style="color: black">Description</span> (Required)</h4>
          </div>
            <input class="text-input-box" type="text" name="description" placeholder="If you like sushi, head to Chase...">
        </div>
        <div class="review-rating-input">
          <h4 style="font-weight: 400;"> <span style="color: black">Rating Out of 5</span> (Required)</h4>
          <ul class="likert">
            <li style="margin-right: 10px"> <span style="font-weight: 500; color: #994D92; font-family: Roboto">1</span></li>
            <li><input type="radio" name="rating" value="1" /></li>
            <li><input type="radio" name="rating" value="2" /></li>
            <li><input type="radio" name="rating" value="3" /></li>
            <li><input type="radio" name="rating" value="4" /></li>
            <li><input type="radio" name="rating" value="5" /></li>
            <li style="margin-left: 10px;"> <span style="font-weight: 500; color: #994D92; font-family: Roboto">5</span> </li>
          </ul>
        </div>
        <div style="margin-top: -15px;" class="text-input">
            <div style="margin-bottom: -13px;">
              <h4 style="font-weight: 400;"> <span style="color: black">Photo</span> (Required)</h4>
            </div>
              <input type="file" name="photo" >
          </div>
      </div>
      <button type="submit" class="login-button">Post Review</button>
      <h4>Changed Your Mind? 
        <a href="/app/home" style="text-decoration: none;"> <span style="font-weight: 500; color: #994D92;">Discard Post</span></a>
      </h4>
    </div>
</form>