<div class="comic" style="margin-top: 5em; height: 650px; background-image: url(/img/tutorial/ch1pg9.png); background-size: 481px">
  <div class="dialogue" style="top: -23px; left: 10px; width: 230px">
    Great work! You can save everything you've coded so far to your <a href="<%= current_site.uri %>">Neocities site</a> to continue working on it.
    It'll be saved as <strong>index.html</strong>, which is the first web page people see when they visit your site.
  </div>
  <div class="dialogue" style="left: 283px;top: 190px; width:160px">
    You can find and edit index.html by visiting your <a href="/dashboard">Neocities dashboard</a>.
  </div>
  <div class="dialogue" style="left: 280px;top: 580px">
    <!-- A cheat sheet of all the tags you've learned can be found in the tutorial section. -->
  </div>
</div>

<script>
  $(document).ready(function() {
    $('#editor').css('display', 'none')
    $('.editor-heading').css('display', 'none')
    $('h3#sitePreview').css('display', 'none')
    $('.preview').css('margin-top', '20px')

    $('#saveToSite').on('click', function(event) {
      event.preventDefault()

      var formData = new FormData()
      var fileContent = sessionStorage.getItem('tutorialHtml')
      formData.append('index.html', new File([fileContent], 'index.html', { type: 'text/html' }))
      formData.append('csrf_token', '<%= escape_javascript csrf_token %>')
      formData.append('username', '<%= escape_javascript current_site.username %>')

      $.ajax({
        url: '/api/upload',
        data: formData,
        processData: false,
        contentType: false,
        type: 'POST',
        error: function(jqXHR, textStatus, errorThrown) {
          var errorMessage = 'There has been an error saving your file, please try again. If it continues to fail, make a copy of the file locally so you don\'t lose your changes!'

          if(jqXHR.responseText) {
            try {
              // Attempt to parse the JSON responseText to get the error message
              var parsedResponse = JSON.parse(jqXHR.responseText);
              errorMessage += ' ERROR MESSAGE: ' + parsedResponse.message;
              alert(errorMessage)
            } catch (error) {
            }
          }

          alert(errorMessage)
        },
        success: function(response, textStatus, xhr){
          window.location = '/tutorial/html/10'
        }
      })
    })
  })
</script>
