my-forms.html

---
title: My Forms
layout: default
permalink: /my-forms/
---

<script>
  savedFormsText = localStorage.getItem('myYukonForms');
    if (!savedFormsText) {
        savedForms = [];
    } else {
        savedForms = JSON.parse(savedFormsText)

    }

    headings = JSON.parse(localStorage.getItem('formHeadings'))
    if (!headings){
      headings = ['Home', 'Business', 'Education'];
    }

    $(document).ready(function() {

      console.log(savedForms);
      function addHeading(heading_text) {
         var container = $('.heading'),
          heading = $('<h4>').addClass('col-12 mt-4').text(heading_text);

        container.append(heading);
      }
       var container = $('.heading');


      $.each(savedForms,function(i,form){
        if (i % 3 == 0) {
          addHeading(headings[i/3])
        }
        // Let's create the DOM
        var item = $('<div>').addClass('col-sm-6 col-md-4 my-3'),
            link = $('<a>').addClass('card h-100'),
            body = $('<div>').addClass('card-body'),
            title = $('<h5>').addClass('card-title'),
            href = '/view-form/' + '?form=' + form.href;

            console.log(href);

        // Add content to the DOM
        title.text(form.page_title);
        body.append(title)
        link.attr('href',href).append(body);
        item.append(link);

        // Append the item to the container
        item.appendTo(container);
      });
    });


    // $.each(savedForms,function(i,form){

    //     // Let's create the DOM
    //     var item = $('<div>').addClass('col-sm-6 col-md-4 my-3'),
    //         link = $('<a>').addClass('card h-100'),
    //         body = $('<div>').addClass('card-body'),
    //         title = $('<h5>').addClass('card-title');

    //     // Add content to the DOM
    //     title.text(form.page_title);
    //     body.append(title)
    //     link.attr('href',form.href).append(body);
    //     item.append(link);

    //     // Append the item to the container
    //     item.appendTo(container);
    // });
</script>

<div class="py-5 text-center">
  <h2>Saved Forms</h2>
  <form
        class="mt-4 mx-auto"
        id="searchForm"
        style="max-width: 24rem"
        action="https://yukon.ca/en/search"
        method="get"
        target="_blank"
      >
    <label class="sr-only" for="search">Search for Forms</label>
    <div class="input-group mb-3">
      <input type="search" name="query" class="form-control" placeholder="Search for forms…" id="search" autocomplete=false>
      <div class="input-group-append">
        <button class="btn btn-primary" type="submit" id="button-addon2"><i class="fas fa-search"></i></button>
      </div>
    </div>
  </form>
</div>

<div class='forms heading row'></div>

<a href="{{ '/' | absolute_url }}">
  <img class="aurora" src="http://localhost:4000/images/Aurora-main.svg" alt=""></div>
</a>