<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <title>הרשימות שלי ({{ title }})</title>
    <link rel="shortcut icon" href="gfx/logo.jpg">
    <!-- RTL Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.rtlcss.com/bootstrap/v4.2.1/css/bootstrap.min.css"
      integrity="sha384-vus3nQHTD+5mpDiZ4rkEPlnkcyTP+49BhJ4wJeJunw06ZAp+wzzeBPUXr42fi8If"
      crossorigin="anonymous">
    <!-- Fontawesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
      integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
      crossorigin="anonymous">
    <link rel="stylesheet" href="css/notes.css">
  </head>
  <body>
    <main role="main" class="container" dir="rtl">
      <h2 class="text-center">הרשימות שלי <small class="text-muted">({{ title }})</small></h2>
      <div id="empty-notes" class="alert alert-warning text-center">
        <h4>אין לך בינתיים רשימות אישיות כאן.</h4>
          <p class="text-muted">
            כדי להוסיף רשימות, יש ללחוץ על כפתורי
            <i class="fa fa-file-signature">​</i> שמופיעים לאורך המדריך.
          </p>
      </div>
      {{ #columns }}
        {{ #title }}
          <div{{ #id }} id="{{ . }}"{{ /id }} class="column hidden">
            <h3><a target="_blank" href="./#/{{ id }}">{{ title }}</a></h3>
            {{ #slides }}
              <div{{ #id }} id="{{ . }}"{{ /id }} class="note hidden">
                <h4><a target="_blank" href="./#/{{ id }}">{{ title }}</a></h4>
                <pre></pre>
              </div>
            {{ /slides }}
          </div>
        {{ /title }}
      {{ /columns }}
    </main>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script>
    $(function() {
        $('.note').each(function() {
            if (this.id) {
                var note = localStorage.getItem('notes-'+this.id);
                if (note && note.trim()) {
                    $('#empty-notes').hide();
                    $(this).addClass('shown').removeClass('hidden');
                    $(this).find('pre').text(note);
                }
            }
        });
        $(':has(.shown)').removeClass('hidden');
    });
    </script>
  </body>
</html>
