<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<th:block th:fragment="footer">

  <div id="footer">
    <div class="container">
      <div class="row">
        <section class="col-3 col-6-narrower col-12-mobilep">
          <h3 id="ranking-title">Rank of Views</h3>
          <ul class="rank_of_view"></ul>
        </section>
        <section class="col-3 col-6-narrower col-12-mobilep">
          <h3>Recent Posts</h3>
          <ul class="recent_posts"></ul>
        </section>

        <section class="col-6 col-12-narrower">
          <h3>SEND TO ME (TELEGRAM)</h3>
          <div id="tlg_form">
            <div class="row gtr-50">
              <div class="col-6 col-12-mobilep">
                <input type="text" name="name" id="name" placeholder="Name"
                       th:value="${#authentication.principal != 'anonymousUser' ? #authentication.principal.username : ''}"
                       th:readonly="${#authentication.principal != 'anonymousUser'}" />
              </div>
              <div class="col-6 col-12-mobilep">
                <input type="email" name="email" id="email" placeholder="Email" />
              </div>
              <div class="col-12">
                <textarea name="message" id="message" placeholder="Message" rows="5"></textarea>
              </div>
              <div class="col-12">
                <ul class="actions">
                  <li><input type="button" class="button alt" value="Send Message" onclick="Stats.sendTelegramMessage()" /></li>
                </ul>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>

    <!-- Icons -->
    <ul class="icons">
      <li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
      <li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
      <li><a href="#" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
      <li><a href="#" class="icon brands fa-linkedin-in"><span class="label">LinkedIn</span></a></li>
      <li><a href="#" class="icon brands fa-google-plus-g"><span class="label">Google+</span></a></li>
    </ul>

    <div class="visitor-stats-inline">
      Today: <span id="visitor-today">-</span> |
      Week: <span id="visitor-week">-</span> |
      Month: <span id="visitor-month">-</span> |
      Year: <span id="visitor-year">-</span> |
      Total: <span id="visitor-total">-</span>
    </div>
    <!-- Copyright -->
    <div class="copyright">
      <ul class="menu">
        <li>&copy;lunaticbum  All rights reserved</li><li>Origin Design from:<a href="http://html5up.net">HTML5 UP</a></li>
      </ul>
    </div>
  </div>

  <style>
    /* 이 스타일은 layout.css 또는 footer.css로 이동 권장 */
    .visitor-stats-inline {
      text-align: center;
      padding-top: 2em;
      margin-top: 2em;
      font-size: 0.8em;
      color: #999;
      border-top: solid 1px rgba(255, 255, 255, 0.05);
    }
    .visitor-stats-inline span {
      font-weight: 600;
      color: #999;
      margin-right: 0.5em;
    }
  </style>
</th:block>
</html>