reply_modal.html

<div id="reply-modal">
  <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>
      <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>

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

      <div id="reply">
        <h4>Get personal</h4>
        <p class="desc">Tweak it and make it your own. Personalized messages go a long way in helping others.</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>