{% extends "sentry/groups/details.html" %}

{% load i18n crispy_forms_filters %}

{% block title %}{{ title }} | {{ block.super }}{% endblock %}

{% block inner %}
<div class="span12">
    <div class="page-header">
        <h3>{{ title }}</h3>
    </div>
    <p>Choose data to export.</p>
    <br />
    <form class="form-horizontal" action="" method="post" id="export_form">
        {% csrf_token %}
        {{ form|crispy }}
        <div id="div_id_field" class="control-group"><label for="id_field" class="control-label requiredField">
                Field<span class="asteriskField">*</span></label><div class="controls"><input class="span6 textinput textInput" id="id_field" name="field" type="text" data-emoji_font="true" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol', Symbola, EmojiSymbols !important;"> </div></div>
        <div class="form-actions">
            <button type="submit" class="btn btn-primary">{% trans "Export Data" %}</button>
            <button type="submit" class="btn btn-preview">{% trans "Preview" %}</button>
        </div>
    </form>
    <div><pre id="export_preview">{{ sample }}</pre></div>
</div>
{% endblock %}

{% block meta %}
    {{ block.super }}
    <script type="text/javascript">
        $(document).ready(function(){
            $('.btn-preview').click(function(evt){
                evt.preventDefault();
                $.post(
                    '/foo/bar/group/2/actions/export/',
                    $('#export_form').serialize(),
                    function( data ) {
                        $("#export_preview").html(data);
                    }
                )
            })
        });
    </script>
{% endblock %}