<?php
  $template = "My Letter Templates";
  $section = "letters";
  include('inc/header.php');
?>

<style>
  @media (min-width: 340px) and (max-width: 500px) {
    #plg article nav {
      width: calc(50% - 5px) !important;
      float: left;
      margin-right: 10px;
      margin-bottom: 10px;
    }
    #plg article nav button {
      width: 100% !important;
    }
    .dataTables_wrapper .dataTables_filter {
      position: absolute;
      top: -45px;
      right: 0;
      margin: 0 !important;
      width: calc(50% - 5px) !important;
    }
  }
</style>

<nav class="main">
  <form action="letter-editor.php">
    <input type="submit" value="Create New Template" class="green">
  </form>
</nav>
<h2><?php echo $template; ?></h2>
<p>Probate letter templates you create will be stored here</p>
<article>
  <nav>
    <button class="button" onclick="deleteSelected()"><i class="ion-close"></i> Delete</button>
  </nav>
  <table data-table data-table-theme="organize">
    <thead>
      <tr>
        <th><label><input onchange="checkAll()" type="checkbox" title="Toggle All"></label></th>
        <th>Letter</th>
        <th>Letter Type</th>
        <th>Added</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><label><input type="checkbox"></label></td>
        <td>Default Probate Letter</td>
        <td>Probate</td>
        <td>6/14/2015</td>
        <td>
          <a href="#" onclick="letter.edit(this)" data-caption="Edit"><i class="ion-edit"></i></a>
          <a href="#" onclick="letter.duplicate(this)" data-caption="Duplicate"><i class="ion-ios-copy"></i></a>
          <a href="#" onclick="letter.remove(this)" data-caption="Delete"><i class="ion-close"></i></a>
        </td>
      </tr>
      <tr>
        <td><label><input type="checkbox"></label></td>
        <td>Default Probate Letter</td>
        <td>Attorney</td>
        <td>6/14/2015</td>
        <td>
          <a href="#" onclick="letter.edit(this)" data-caption="Edit"><i class="ion-edit"></i></a>
          <a href="#" onclick="letter.duplicate(this)" data-caption="Duplicate"><i class="ion-ios-copy"></i></a>
          <a href="#" onclick="letter.remove(this)" data-caption="Delete"><i class="ion-close"></i></a>
        </td>
      </tr>
      <tr>
        <td><label><input type="checkbox"></label></td>
        <td>Harsh Probate Letter</td>
        <td>Probate</td>
        <td>6/14/2015</td>
        <td>
          <a href="#" onclick="letter.edit(this)" data-caption="Edit"><i class="ion-edit"></i></a>
          <a href="#" onclick="letter.duplicate(this)" data-caption="Duplicate"><i class="ion-ios-copy"></i></a>
          <a href="#" onclick="letter.remove(this)" data-caption="Delete"><i class="ion-close"></i></a>
        </td>
      </tr>
      <tr>
        <td><label><input type="checkbox"></label></td>
        <td>Harsh Probate Letter</td>
        <td>Attorney</td>
        <td>6/14/2015</td>
        <td>
          <a href="#" onclick="letter.edit(this)" data-caption="Edit"><i class="ion-edit"></i></a>
          <a href="#" onclick="letter.duplicate(this)" data-caption="Duplicate"><i class="ion-ios-copy"></i></a>
          <a href="#" onclick="letter.remove(this)" data-caption="Delete"><i class="ion-close"></i></a>
        </td>
      </tr>
    </tbody>
  </table>
</article>

<script>
  // Button functions
  var letter = {
      edit: function(id){
        var letter = id.parentNode.parentNode.getElementsByTagName('td')[1].innerHTML;
        window.location.href = window.location.href.split('/')[0] + 'letter-editor.php?letter=' + letter
      },
      duplicate: function(id){
        var row = id.parentNode.parentNode,
            letter = row.getElementsByTagName('td')[1].innerHTML,
            clone = row.parentNode.appendChild(row.cloneNode(true));
        notification(letter + ' duplicated','',5)
        var orig = clone.style.background;
        clone.style.background = 'lightyellow';
        clone.style.transition = 'background 2s ease-in-out';
        setTimeout(function(){clone.style.background=orig},1000)
        setTimeout(function(){clone.style.transition=''},3000)
      },
      remove: function(element){
        if(window.confirm('Would you like to delete this letter template?','') == true){
          var letter = element.parentNode.parentNode.getElementsByTagName('td')[1].innerHTML;
          element.parentElement.parentElement.parentElement.removeChild(element.parentElement.parentElement)
          notification(letter + ' template removed','',5)
        }
      }
    };
  // Initialize datatables.js plugin
  $(document).ready(function(){
    $('[data-table]').DataTable({
      searching: true,
      paging: true,
      "pagingType": "simple_numbers",
      "bLengthChange":false,
      "oLanguage": { "sSearch": "" }
    });
  });
</script>

<?php
  include('inc/tables.php');
  include('inc/footer.php');
?>