{% extends "admin/base_site.html" %}

{% block extrahead %}{{ block.super }}
<style type="text/css">
.example_tag {
    padding: 0px;
    margin: 0px;
    min-width: 400px;
    width: 100%;
    border: 0px!important;
}
tr {
    background-color: #ffffff;
}
tr:hover {
    background-color: #e0e0e0;
}

</style>
<script type="text/javascript">
try {
    jQuery(document);
} catch (e) {
    alert("Error, jQuery JS not loaded!\n Original error was:" + e);
}
jQuery(document).ready(function($) {
	$('.example_tag').each(function() {
		// 'resize' every input field
     	var len = $(this).val().length;
     	$(this).attr("size", len+2);
     	$(this).attr("maxlength", len);
	});
	$('.example_tag').hover(function() {
		$(this).select();
	});
});
</script>
{% endblock extrahead %}

{% block content %}
<table class="info">
    <caption>list of all existing lucidTags</caption>
    <tr>
        <th>plugin name</th>
        <th>lucidTag example</th>
        <th>Plugin DocString</th>
    </tr>
    {% for lucid_tag in lucid_tags %}
    <tr>
    <td>{{ lucid_tag.plugin_name }}</td>
    <td title="for copy&amp;paste into your cms page" class="nowrap">
        {% if lucid_tag.fallback_example %}
            <input type="text" class="example_tag" title="automatic generated example" value='{{ lucid_tag.fallback_example }}'></input><br />
        {% else %}
            {% for example in lucid_tag.examples %}
            	<input type="text" class="example_tag" value='{{ example }}'></input><br />
            {% endfor %}
        {% endif %}
    </td>
    <td>{% if lucid_tag.doc %}{{ lucid_tag.doc }}{% else %}<i>(no DocString)</i>{% endif %}</td>
    </tr>
    {% endfor %}
</table>

<h1>context keys</h1>
<p>
    (Note: Not all of these tags are useable into page template or page content)
</p>
<ul>
{% for key in context_keys %}
    <li>&#x7B;&#x7B; {{ key }} &#x7D;&#x7D;</li>
{% endfor %}
</ul>
{% endblock content %}