{% extends 'forms/base_widget.html' %}

{% block html %}
    <div class="recipients-box left" {% if field.errors %} data-error="{{ _render_errors(field.errors) }}"{% endif %}>
        <div class="text">
            {{- field.text_value|markdown -}}
        </div>
        <button class="i-button icon-clipboard js-copy-to-clipboard" title="{% trans %}Copy emails to clipboard{% endtrans %}"
                data-clipboard-target="#form-group-recipients p" type="button"></button>
    </div>
{% endblock %}

{% block javascript %}
    <script>
        (function() {
            'use strict';

            var $recipients = $('#form-group-recipients').find('.recipients-box');
            var emails = $recipients.find('.text').text();
            var count = {{ field.count }};
            if (count > 10) {
                $recipients.addClass('recipients-smaller truncate');
                var $link = $('<a>', {text: $T.gettext('Show more')});
                $link.on('click', function() {
                    $recipients.toggleClass('truncate');
                    if ($recipients[0].scrollHeight > $recipients[0].clientHeight){
                        $recipients.addClass('scroll');
                    }
                    $link.text($recipients.hasClass('truncate') ? $T.gettext('Show more') : $T.gettext('Show less'));
                });
                $('#form-group-recipients').find('.form-field').append($link);
            }
        })();
    </script>
{%- endblock %}
