{# -*- mode:web -*- engine:django -*- #}
{% comment %}

Dialogfrom DEMO Initial page

Includes media required to instantiate dialog 'anchors' and basic demo app styling

{% endcomment %}
{% load static %}
<!DOCTYPE html>
<html>
  
  <head>
    <meta http-equiv="Content-Style-Type" content="text/css"/>
    <title>DialogDemo</title>
    {% include "dialogform/anchor_media.html" %}
    <link rel="stylesheet" type="text/css" href="{% static 'dialogform/demo/css/style.css' %}">
  </head>

  <body>
    
    <h2>Dialog Form Demo Page</h2>
    
    <p>Each column of the table below shows a different editing dialog type for the rows of notes.</p>
    <p>The form for the third and fourth columns below uses admin widgets - but note: for these to work properly you should log into admin first (see below).</p>
    <p>The dialogs of the third column have to load all the admin core stylesheets and javascript so they affect the referring page display while the dialogs are open. Fourth column dialogs load into an iframe so the referring page is not affected.</p>
    <p><a href="{% url 'admin:demo_note_changelist' %}">Go to Notes in Admin</a>
      to see dialog-anchor demos within the admin environment and to add/remove Notes or Tags.
      Login as <b>admin</b>/<b>admin</b></p>
    <p>New notes can also be added using the admin "+" related widget wrapper within the dialogs.</p>
    <p>Here is a <span class="dialog-anchor" data-url="#local_note_dialog"><span>Search</span></span> (local dialog) example.</p>

    <p class="notes-links">{{ note_list.count }} Note{{ note_list.count|pluralize }}:</p>
    <table class="note-list" style="position:relative;">
      <tr>
        <th scope="col">Note and <br>Tag Select Dialogs</th>
        <th scope="col">Note Iframe/<br>dialog</th>
        <th scope="col">Note Dialog<br>with admin widgets</th>
        <th scope="col">Note Iframe dialog<br>with admin widgets</th>
        <th scope="col">Date</th><th scope="col">Published</th>
      </tr>
      
      {% for note in note_list %}
        <tr>
          <td>{% spaceless %}
            <div class="noteandtags">
              <div class="dialog-anchor" data-url="{% url 'note-edit' pk=note.pk %}" title="Edit with dialog">
                <span>{{ note.content }}</span></div>
              <sup>
                <div class="dialog-anchor" data-url="{% url 'note-selecttags' pk=note.pk %}">
                  {% if note.tags.count %}
                    <span>
                      {% for tag in note.tags.all %}{{ tag.name }}{% if not forloop.last %},{% endif %}{% endfor %}
                    </span>
                  {% else %}
                    <img class="hide" src="/static/dialogform/demo/img/icon-tag.svg">
                  {% endif %}
                </div>
              </sup>
            </div>
          {% endspaceless %}</td>
          <td>
            <div class="dialog-anchor" data-url="{% url 'note-iframe' pk=note.pk %}"  title="Edit with dialog/iframe"
                 data-type="iframe">
              <span>{{ note.content }}</span></div>
          </td>
          <td>
            <div class="dialog-anchor" data-url="{% url 'note-edit-admin' pk=note.pk %}"
                 title="Dialog Edit with admin widgets"
                 data-cleanup="admin_cleanup">
              <span>{{ note.content }}</span></div>
          </td>
          <td>
            <div class="dialog-anchor" data-url="{% url 'note-iframe-admin' pk=note.pk %}"
                 title="Iframe Edit with admin widgets"
                 data-type="iframe"
                 data-cleanup="admin_cleanup">
              <span>{{ note.content }}</span></div>
          </td>
          <td>
            {{ note.date }}
          </td>
          <td>
            {{ note.published }}
          </td>
        </tr>
      {% endfor %}
    </table>

    <div id="localdialogs" style="display:none">
      {% include "dialogform/dialog.html" with dialogform_id="local_note_dialog" dialogform_method="get" form=queryform %}
    </div>

  </body>
</html>
