{% comment %}

Popup and full-page visualization of snippet group. This popup.html is
the default template for the html_default method.

{% endcomment %}

{% load workspaces %}
{# header #}
<div>
  <img src="{{ symbol_url }}" />&nbsp;
  <strong>{{ title|truncatewords:8 }}</strong>
</div>
<div style="width: {{ width|default:"100%" }}; height: {{ height|default:"240px" }};"
     class="img-use-my-size">
  <a href="{{ img_url }}"
     class="replace-with-image">
    afbeelding nog niet geladen
  </a>
</div>
<br />
<div class="toggle_table_wrapper">
  <p>
    <input type="button" name="toggle" value="Acties" class="toggle_button" />
  </p>
  <table class="noprint generic-table toggle_table">
    <thead>
      <tr>
        <th>Naam</th>
        <th class="button">Export</th>
        {% if editing %}
        <th class="button">Bewerken</th>
        {% endif %}
        {% if add_snippet %}
        <th class="button">Voeg&nbsp;toe</th>
        {% endif %}
      </tr>
    </thead>
    <tbody>
      {% if editing %}
      <tr>
        <td>Hele grafiek</td>
        <td class="button">
          <a href="{% url lizard_map.export_snippet_group_csv snippet_group_id=snippet_group.id %}"
             class="ss_table_save ss_sprite"
             title="Export csv"
             >&nbsp;</a>
        </td>
        <td class="button">
          {# na klik komt er een popup met opties voor drempelwaarde, bewerkingsperiode, titel, etc... #}
          {% if snippet_group %}
          <a href="#"
             class="ss_chart_curve_edit ss_sprite graph_edit_trigger"
             title="Bewerk grafiek"
             rel="#graph_edit_overlay_{{ snippet_group.id }}">&nbsp;</a>
          <div id="graph_edit_overlay_{{ snippet_group.id }}" class="popup noprint">
            <div class="popup-content">
              <h1>Grafiek opties</h1>
              <form class="popup-graph-edit-form popup-graph-edit-global graph-options popup-form"
                    action="{% url lizard_map.snippet_group_graph_edit snippet_group_id=snippet_group.id %}"
                    method="post">
                <fieldset class="fixed-label-width">
                  <div>
                    <label>Titel</label>
                    <input class="graph-title" type="text" name="title"
                           value="{% firstof snippet_group.layout_title '' %}" />
                  </div>
                  <div>
                    <label>Y-min</label>
                    <input class="graph-y-min" type="text" name="y_min"
                           value="{{ snippet_group.layout_y_min|floatformat }}" />
                  </div>
                  <div>
                    <label>Y-max</label>
                    <input class="graph-y-max" type="text" name="y_max"
                           value="{{ snippet_group.layout_y_max|floatformat }}" />
                  </div>
                  <div>
                    <label>X-label</label>
                    <input class="graph-x-label" type="text" name="x_label"
                           value="{% firstof snippet_group.layout_x_label '' %}" />
                  </div>
                  <div>
                    <label>Y-label</label>
                    <input class="graph-y-label" type="text" name="y_label"
                           value="{% firstof snippet_group.layout_y_label '' %}" />
                  </div>
                </fieldset>
                <fieldset>
                  <div>
                    <label>Drempelwaarde</label><br />
                    <input class="graph-boundary-value" type="text" name="boundary_value"
                           value="{{ snippet_group.boundary_value|floatformat }}" />
                  </div>
                  <div>
                    <label>Percentiel</label><br />
                    <input class="graph-percentile-value" type="text" name="percentile_value"
                          value="{{ snippet_group.percentile_value|floatformat }}" />
                  </div>
                  <div>
                    <label>Samenvattingsperiode</label><br />
                    <div>
                      <input class="graph-aggregation-period"
                             type="radio" name="aggregation_period"
                             value="1"
                             {% ifequal snippet_group.aggregation_period 1 %} checked{% endifequal %}/>
                      hele periode
                      <input class="graph-aggregation-period"
                             type="radio" name="aggregation_period"
                             value="2"
                             {% ifequal snippet_group.aggregation_period 2 %} checked{% endifequal %} />
                      jaar
                      <input class="graph-aggregation-period"
                             type="radio" name="aggregation_period"
                             value="3"
                             {% ifequal snippet_group.aggregation_period 3 %} checked{% endifequal %} />
                      kwartaal
                      <input class="graph-aggregation-period"
                             type="radio" name="aggregation_period"
                             value="4"
                             {% ifequal snippet_group.aggregation_period 4 %} checked{% endifequal %} />
                      maand
                    </div>
                  </div>
                  <div>
                    <label>Filter op maand</label><br />
                    <select class="graph-filter-month" type="text" name="restrict_to_month">
                      <option value="no-restriction">Geen filter</option>
                      <option value="1">Alleen januari</option>
                      <option value="2">Alleen februari</option>
                      <option value="3">Alleen maart</option>
                      <option value="4">Alleen april</option>
                      <option value="5">Alleen mei</option>
                      <option value="6">Alleen juni</option>
                      <option value="7">Alleen juli</option>
                      <option value="8">Alleen augustus</option>
                      <option value="9">Alleen september</option>
                      <option value="10">Alleen oktober</option>
                      <option value="11">Alleen november</option>
                      <option value="12">Alleen december</option>
                    </select>
                  </div>
                </fieldset>
                <p>
                  <input class="graph-options-submit" type="submit" value="Update grafiek" />
                </p>
              </form>
            </div>
          </div>
          {% endif %}
        </td>
        {% if add_snippet %}
        <td></td>
        {% endif %}
      </tr>
      {% endif %}
      {% if snippet_group %}
      {# snippet group: popup from collage #}
      {% for snippet in snippets %}
      <tr>
        <td>{{ snippet.name }}</td>
        <td class="button">
          <a href="{% url lizard_map.export_identifier_csv %}?workspace_item_id={{ snippet.workspace_item.id }}&amp;identifier_json={{ snippet.identifier|json_escaped }}"
             class="ss_table_save ss_sprite"
             title="Export csv"
             >&nbsp;</a>
        </td>
        {% if editing %}
        <td class="button">
          <a href="#"
             class="ss_chart_curve_edit ss_sprite graph_edit_trigger"
             title="Bewerk lijn"
             rel="#graph_edit_overlay_snippet_{{ snippet.id }}">&nbsp;</a>
          <div id="graph_edit_overlay_snippet_{{ snippet.id }}"
               class="popup noprint popup-graph-edit-form popup-form">
            <div class="popup-content">
              <h2>{% firstof snippet.name snippet.shortname %}</h2>
              <form class="graph-line-options"
                    action="{% url lizard_map_snippet_edit snippet_id=snippet.id %}"
                    method="post">
                <p>
                  <label>Kleur</label>
                  <select class="graph-color" name="color">
                    <option value="">(kies kleur)</option>
                    {% for color in colors %}
                    <option value="{{ color.mapnik }}"{% ifequal snippet.identifier.layout.color color.mapnik %} selected{% endifequal %}>{{ color.display_name }}</option>
                    {% endfor %}
                  </select>
                </p>
                <p>
                  <input class="graph-line-min" type="checkbox" name="line_min"
                         value="{{ snippet.identifier.layout.line_min }}" />
                  <label>Toon minimum</label>
                </p>
                <p>
                  <input class="graph-line-max" type="checkbox" name="line_max"
                         value="{{ snippet.identifier.layout.line_max }}" />
                  <label>Toon maximum</label>
                </p>
                <p>
                  <input class="graph-line-avg" type="checkbox" name="line_avg"
                         value="{{ snippet.identifier.layout.line_avg }}" />
                  <label>Toon gemiddelde</label>
                </p>
                <p>
                  <input class="graph-line-options-submit"
                         type="submit"
                         value="Update grafiek" />
                </p>
              </form>
            </div>
          </div>
        </td>
        {% endif %}
        {% if add_snippet %}
        <td class="button">
          <a href=""
             class="add-snippet ss_chart_line_add ss_sprite"
             data-workspace-id="{{ snippet.workspace_item.workspace.id }}"
             data-workspace-item-id="{{ snippet.workspace_item.id }}"
             data-item-identifier='{{ snippet.identifier|json_escaped }}'
             data-item-shortname="{{ snippet.shortname }}"
             data-item-name="{{ snippet.name }}"
             title="Voeg toe aan collage">&nbsp;</a>
        </td>
        {% endif %}
      </tr>
      {% endfor %}
      {% else %}
      {# no snippet group: items not from collage #}
      {% for display_object in display_group %}
      <tr>
        <td>{{ display_object.name }}
        {% if display_object.object.get_absolute_url %}<a href="{{ display_object.object.get_absolute_url }}" class="ss_sprite ss_arrow_turn_right">&nbsp;</a>{% endif %}
        </td>
        <td class="button">
          <a href="{% url lizard_map.export_identifier_csv %}?workspace_item_id={{ display_object.workspace_item.id }}&identifier_json={{ display_object.identifier|json_escaped }}"
             class="ss_table_save ss_sprite"
             title="Export csv"
             >&nbsp;</a>
        </td>
        {% if editing %}
        <td class="button">
          <a href="{{ display_object.object.get_absolute_url }}"
             class="ss_chart_curve_edit ss_sprite"
             title="Bewerk lijn">&nbsp;</a>
        </td>
        {% endif %}
        {% if add_snippet %}
        <td class="button">
          <a href=""
             class="add-snippet ss_chart_line_add ss_sprite"
             data-workspace-id="{{ display_object.workspace_item.workspace.id }}"
             data-workspace-item-id="{{ display_object.workspace_item.id }}"
             data-item-identifier='{{ display_object.identifier|json_escaped }}'
             data-item-shortname="{{ display_object.shortname }}"
             data-item-name="{{ display_object.name }}"
             title="Voeg toe aan collage">&nbsp;</a>
        </td>
        {% endif %}
      </tr>
      {% endfor %}
      {% endif %}
    </tbody>
  </table>
</div>
