<div class="c-comments">

  <div class="c-comments-bar js-c-comments-bar">
    <div class="c-comments-bar__count">
      <span class="c-comments-bar__count__icon">
        <svg class="c-comments-bar__count__icon-art" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#icon-comments"></use>
        </svg>
      </span>
      <span class="c-comments-bar__count__text">Comments</span>
    </div>
    <div class="c-comments-bar__control c-comments-bar__control--open">
      <button class="c-button" type="button" aria-controls="comments-panel" aria-expanded="true">
        <svg role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#nav-arrow-down"></use>
        </svg>
        <span class="u-visually-hidden">Show comments</span>
      </button>
    </div>
  </div>

  <div id="comments-panel" class="c-comments-panel js-c-comments-panel">
    <div class="c-comments-panel__preamble">
      The Globe invites you to share your views. Please stay on topic and be respectful to everyone.
      For more information on our commenting policies and how our community-based moderation works,
      please read our <a href="#">Community Guidelines</a> and our <a href="#">Terms and Conditions</a>.

      <div class="c-comments-panel__preamble-actions">
        <a href="#" class="c-button c-button--full-width">
          <span class="c-button__text">Log in</span>
        </a>
        <a href="#" class="c-button c-button--full-width c-button--dark-primary">
          <span class="c-button__text">Subscribe to comment</span>
        </a>
        <a href="#" target="_blank" rel="noopener">Why do I need to subscribe?</a>
      </div>
    </div>
    <div class="c-comments-panel__comments">
      <p>Comments UI goes here!</p>
    </div>
    <div class="c-comments-panel__postamble">
      <p>Read <a href="#">most recent letters to the editor</a>.</p>
    </div>
  </div>

</div>
