<?php
/* panel for repetitive fields tutorials */
?>
<div class="container">
  <div class="row">
    <div class="columns one-third">
      <div class="iframe">
        <iframe src="https://www.youtube-nocookie.com/embed/mcC36e69-eM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
      <h3>
        Use a table construct for a simple row of repetitive fields, or a tab construct for an entire section of fields.
      </h3>
      <ul>
        <li><a href="https://www.youtube.com/watch?v=mcC36e69-eM&amp;t=390s">00:06:30</a><span> - Creating a table row of fields.</span></li>
        <li><a href="https://www.youtube.com/watch?v=mcC36e69-eM&amp;t=615s">00:10:15</a><span> - adding a table footer.</span></li>
        <li><a href="https://www.youtube.com/watch?v=mcC36e69-eM&amp;t=800s">00:13:20</a><span> - customising table button label</span></li>
        <li><a href="https://www.youtube.com/watch?v=mcC36e69-eM&amp;t=1255s">00:20:55</a><span> - table of fields in notification email</span></li>
        <li><a href="https://www.youtube.com/watch?v=mcC36e69-eM&amp;t=1390s">00:23:10</a><span> - filter mail tags</span></li>
        <li><a href="https://www.youtube.com/watch?v=mcC36e69-eM&amp;t=1593s">00:26:33</a><span> - creating a tabbed section.</span></li>
      </ul>
    </div>
    <div class="columns one-third">
      <div class="iframe">
        <iframe src="https://www.youtube-nocookie.com/embed/wTdLVtU_mlU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
      <h3>
        Programmatically managing tables using JavaScript
      </h3>
      <ul>
        <li>
          <a href="https://www.youtube.com//watch?v=wTdLVtU_mlU&amp;t=112s" dir="auto">00:01:52</a><span dir="auto" class="style-scope yt-formatted-string"> - Inserting paragraphs and other non-field HTML elements in your form.</span>
        </li>
<li>
  <a href="https://www.youtube.com//watch?v=wTdLVtU_mlU&amp;t=205s" dir="auto">00:03:25</a><span dir="auto" class="style-scope yt-formatted-string"> - Add custom JavaScript to your form.</span>
</li>
<li><a href="https://www.youtube.com//watch?v=wTdLVtU_mlU&amp;t=328s" dir="auto">00:05:28</a><span dir="auto" class="style-scope yt-formatted-string"> - Identifying form tables in JavaScript.
</span></li><li><a href="https://www.youtube.com//watch?v=wTdLVtU_mlU&amp;t=400s" dir="auto">00:06:40</a><span dir="auto" class="style-scope yt-formatted-string"> - Using the table 'ready' event.
</span></li><li><a href="https://www.youtube.com//watch?v=wTdLVtU_mlU&amp;t=540s" dir="auto">00:09:00</a><span dir="auto" class="style-scope yt-formatted-string"> - Using field 'change' event.
</span></li><li><a href="https://www.youtube.com//watch?v=wTdLVtU_mlU&amp;t=767s" dir="auto">00:12:47</a><span dir="auto" class="style-scope yt-formatted-string"> - Adding a row to a table.
</span></li><li><a href="https://www.youtube.com//watch?v=wTdLVtU_mlU&amp;t=884s" dir="auto">00:14:44</a><span dir="auto" class="style-scope yt-formatted-string"> - Count rows in a table.
</span></li><li><a href="https://www.youtube.com//watch?v=wTdLVtU_mlU&amp;t=922s" dir="auto">00:15:22</a><span dir="auto" class="style-scope yt-formatted-string"> - Switch-off comments.
</span></li><li><a href="https://www.youtube.com//watch?v=wTdLVtU_mlU&amp;t=1170s" dir="auto">00:19:30</a><span dir="auto" class="style-scope yt-formatted-string"> - Removing rows from a table.
</span></li><li><a href="https://www.youtube.com//watch?v=wTdLVtU_mlU&amp;t=1260s" dir="auto">00:21:00</a><span dir="auto" class="style-scope yt-formatted-string"> - Toggling the 'Add Row' button.
</span></li><li><a href="https://www.youtube.com//watch?v=wTdLVtU_mlU&amp;t=1331s" dir="auto">00:22:11</a><span dir="auto" class="style-scope yt-formatted-string"> - Using the row 'added' event.
</span></li><li><a href="https://www.youtube.com//watch?v=wTdLVtU_mlU&amp;t=1403s" dir="auto">00:23:23</a><span dir="auto" class="style-scope yt-formatted-string"> - Toggling the row delete button.</span></li>
      </ul>
    </div>
    <div class="columns one-third">
    </div>
  </div>
</div>
