{% load i18n %}
{% if components %}
<script type="text/javascript">
    String.prototype.entityify = function () {
    return this.
        replace(/&/g, "&amp;").
        replace(/</g, "&lt;").
        replace(/>/g, "&gt;").
        replace(/"/g, "&quot;");
    };

    $(document).ready(function() {
        // Interactive chart
        $("#chart-interactive-menu").change(function(){
            s = $("#chart-interactive-snippet");
            component_slug = $("#chart-interactive-menu option:selected").val();
            if (component_slug == "") {
                s.slideUp("slow");
                return;
            }
            project_slug = '{{ project.slug }}';
            url = "{{SITE_URL_PREFIX}}/projects/p/" + project_slug + '/c/' + component_slug + '/chart';
            $.ajax({
                url: url,
                success: function(data) {
                    s.html(data.entityify());
                    s.slideDown("slow");
                }
            });
        });

        // Static image
        function mkcode(component_slug) {
            project_slug = '{{ project.slug }}';
            tip = "See more information on Transifex.net";
            base_url = "{{SITE_URL_PREFIX}}/projects/p/" + project_slug + '/c/' + component_slug + '/';
            img_url = base_url + 'chart/image_png';

            code = "<a target=\"_blank\" style=\"text-decoration:none; color:black; font-size:66%\" href=\"" + base_url + "\" \n";
            code += "title=\""+tip+"\">Top translations: " +project_slug+ " » "+component_slug+"</a><br/>\n";
            code += "<img border=\"0\" src=\""+img_url+"\"/><br/>\n";
            code +=  "<a target=\"_blank\" href=\"{{SITE_URL_PREFIX}}{% url transifex.home %}\"><img border=\"0\" src=\"{{ STATIC_URL }}charts/images/tx-logo-micro.png\"/></a>";
            return code;
        }

        $("#chart-image-div").html(mkcode('{{default_component.slug}}'));
        $("#chart-image-menu").change(function(){
            s = $("#chart-image-snippet");
            component_slug = $("#chart-image-menu option:selected").val();
            if (component_slug == "") {
                s.slideUp("slow");
                return;
            }
            s.html(mkcode(component_slug).entityify());
            s.slideDown("slow");
        });
    });
</script>

<div class="details separate">
<h3>{% blocktrans %}Image charts{% endblocktrans %}</h3>
<div>
    <table class="widget">
        <tr>
            <td style="text-align: center;"><div id="chart-image-div">{% blocktrans %}Loading...{% endblocktrans %}</div></td>

            <td style="vertical-align:top;">
                <p>{% blocktrans %}Display your project's translation statistics on your own website as a simple image.
                Perfect for embedding in wiki pages, Trac instances, emails.{% endblocktrans %}</p>
                <p>{% blocktrans %}The chart will always reflect your live Transifex numbers.{% endblocktrans %}</p>
                <p>{% blocktrans %}Show code snippet for component:{% endblocktrans %}
                <select id="chart-image-menu">
                    <option value="">{% blocktrans %}Hidden{% endblocktrans %}</option>
                    {% for component in components %}
                        <option value="{{component.slug}}">{{component.name}}</option>
                    {% endfor %}
                </select>
                </p>
            </td>
        </tr>
    </table>
    <pre id="chart-image-snippet" class="code_snippet">Loading...</pre>
</div>
</div>

<div class="details separate">
<h3>{% blocktrans %}Interactive charts{% endblocktrans %}</h3>

<div>
    <table class="widget">
        <tr>
            <td style="align: center;">
                <iframe src="{% url chart_comp_html project.slug default_component.slug %}"
                  id="chart-interactive-iframe" style="width: 100%; height:300px; overflow:hidden;">{% blocktrans %}Loading...{% endblocktrans %}</iframe>
            </td>

            <td style="vertical-align:top;">
                <p>{% blocktrans %}Display your project's translation statistics on your own website as interactive chart.
                This requires modifications to your homepage's HTML code.{% endblocktrans %}</p>

                <p>{% blocktrans %}By tweaking the code you can adjust verbosity, dimensions and colors of the chart{% endblocktrans %}</p>

                <p>{% blocktrans %}Show code snippet for component:{% endblocktrans %}
                <select id="chart-interactive-menu">
                    <option value="">{% blocktrans %}Hidden{% endblocktrans %}</option>
                    {% for component in components %}
                        <option value="{{component.slug}}">{{component.name}}</option>
                    {% endfor %}
                </select>
                </p>
            </td>
        </tr>
    </table>


    <pre id="chart-interactive-snippet" class="code_snippet">Loading...</pre>
</div>

</div>
{% else %}
<h3>{% blocktrans %}Interactive and Image Charts{% endblocktrans %}</h3>
{% blocktrans %}Sorry, but your project doesn't have any components with up-to-date statistics. 
You need to have at least one component with statistics to export charts from Transifex.{% endblocktrans %}
{% endif %}
