{# vim: set ts=2 et sts=2 sw=2: #}
<div id="reply-modal" class="kbox" data-modal="true" title="{{ _('Reply') }}">
  <div id="reply-container">

    <div id="initial-tweet">
      <a href="" class="avatar" target="_blank"><img src="" /></a>
      <span class="box">
        <img src="{{ MEDIA_URL }}img/customercare/initial-tweet-arrow.png" alt="" id="arrow" />
        <a href="" class="twittername" target="_blank"></a>
        <a href="" class="permalink" target="_blank">
          <time datetime=""></time>
        </a>
        <div class="text"></div>
      </span>
    </div>

    <div id="replies">
      <h4>{{ _('What is your reply about?') }}</h4>
      {% if not canned_responses %}
        <span id="no-responses">
          {% trans signpost_help_url='https://wiki.mozilla.org/Army_of_Awesome/Signposts', contact_email='atopal@mozilla.com'|public_email %}
            We have created <a href="{{ signpost_help_url }}">signpost messages</a>
            for easily replying to top Firefox topics on Twitter.
            If you would like to have messages for your language appear
            here, contact Kadir Topal for more info: {{ contact_email }}
          {% endtrans %}
        </span>
      {% else %}
        <div id="accordion">
          {% for resp in canned_responses %}
          <h3><a href="#">{{ resp.title }}</a></h3>
          <div>
            <ul class="topics">
              {% for topic in resp.responses.all() %}
              <li>
                <a class="reply-topic" href="#">{{ topic.title }}</a>
                <span class="snippet">{{ topic.response }}</span>
              </li>
              {% endfor %}
            </ul>
          </div>
          {% endfor %}
        </div>
      {% endif %}

      <div class="hrbreak"></div>

      <div id="reply">
        <h4>{{ _('Get personal') }}</h4>
        <p class="desc">
          {% trans %}
            Tweak it and make it your own.
            Personalized messages go a long way in helping others.
          {% endtrans %}
        </p>
        <div class="container">
          <div class="character-counter">140</div>
          <form action="{{ url('customercare.twitter_post') }}" method="POST">
            <div class="inner-container">
              <img src="{{ MEDIA_URL }}img/customercare/reply-arrow.png" alt="" id="reply-arrow" />
              <textarea id="reply-message"></textarea>
            </div>

            <span id="submit-message">{{ _('Your message was sent!') }}</span>
            <span id="error-message"></span>
            <a href="#submit" id="submit" class="submitButton" title="{{ _('Submit') }}">{{ _('Submit') }} <img id="submit-busy" src="{{ MEDIA_URL }}img/customercare/spinner.gif"/></a>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>