{% extends "smartsnippets/plugin_change_form.html" %}

{% block top %}
<div style="padding:10px; margin-bottom: 10px; border:1px solid #ccc">
<h3>Preview:</h3>
<hr/><br/>
{{ block.super }}
</div>
{% endblock %}

{% block after_related_objects %}
{{ block.super }}
{% if variables %}
    <fieldset class="module">
        <h2>Smart Snippet Variables</h2>
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Value</th>
                </tr>
            </thead>
            <tbody>
            {% for var, val in variables %}
                <tr>
                    <td><label for='var{{forloop.counter}}'>{{var}}</label></td>
                    <td><input id='var{{forloop.counter}}' type='text' name='_{{var}}_' value='{{val}}'/></td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </fieldset>
    <script type="text/javascript">
        function input2text() {
            var e = $(this),
                initial_value = e.val(),
                new_textarea;

            if (e.val().length > 12) {
                new_textarea = $('<textarea>');
                new_textarea.attr('name', e.attr('name'));
                e.replaceWith(new_textarea);
                new_textarea.height(200);
                new_textarea.width(500);
                new_textarea.focus();
                new_textarea.val(initial_value);
                parent.setiframeheight($('body').height()+20, {{object_id}});
            }
        }
        $(function() { $('input[type=text]').each(input2text); });
        $('input[type=text]').live('keyup', input2text);
        $('textarea').live('keyup', function() {
            var e = $(this),
                initial_value = e.val(),
                new_input;

            if (e.val().length <= 12) {
                new_input = $('<input type=text>');
                new_input.attr('name', e.attr('name'));
                e.replaceWith(new_input);
                new_input.focus();
                new_input.val(initial_value);
                parent.setiframeheight($('body').height()+20, {{object_id}});
            }
        });
    </script>

{% endif %}

{% endblock %}
