<!DOCTYPE html>
<html lang="ko-kr">
  <head>
    <!-- Google tag (gtag.js) -->
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=G-51YBZ401K4"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("js", new Date());

      gtag("config", "G-51YBZ401K4");
    </script>
    <!-- Enable responsiveness on mobile devices-->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1"
    />
    <title>
      <%= file_info.title %>
    </title>

    <link rel="icon" href="/img/ChewingCppFav.png" type="image/png" />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+KR|Source+Code+Pro&display=swap"
      rel="stylesheet"
    />

    <link rel="stylesheet" type="text/css" href="/css/new_page.css" />
    <link rel="stylesheet" type="text/css" href="/css/page.css" />
    <link rel="stylesheet" type="text/css" href="/css/vs-fast.css" />
    <link rel="stylesheet" type="text/css" href="/css/comment.css" />
    <script src="/dist/new_page.bundle.js" type="text/javascript"></script>
    <script src="https://accounts.google.com/gsi/client" async defer></script>
    <script src="https://www.google.com/recaptcha/api.js?render=6LeE_nYUAAAAAGm9qTa71IwvvayWV9Q7flqNkto2"></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css"
      integrity="sha384-GvrOXuhMATgEsSwCs4smul74iXGOixntILdUW9XmUC6+HX0sLNAK3q71HotJqlAn"
      crossorigin="anonymous"
    />

    <!-- The loading of KaTeX is deferred to speed up page rendering -->
    <script
      defer
      src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js"
      integrity="sha384-cpW21h6RZv/phavutF+AuVYrr+dA8xD9zs6FwLpaCct6O9ctzYFfFr4dgmgccOTx"
      crossorigin="anonymous"
    ></script>

    <!-- To automatically render math in text elements, include the auto-render extension: -->
    <script
      defer
      src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/contrib/auto-render.min.js"
      integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05"
      crossorigin="anonymous"
    ></script>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        elems = document.querySelectorAll(".math-latex");
        for (let i = 0; i < elems.length; i++) {
          renderMathInElement(elems[i], {
            delimiters: [
              { left: "$$", right: "$$", display: true },
              { left: "$", right: "$", display: false },
            ],
          });
        }
      });
    </script>
  </head>
  <body>
    <header class="top-static-header">
      <div class="top-static-header-row top-static-header-main">
        <div class="modoocode-name"><a href="/">모두의 코드</a></div>
        <div class="google-custom-search">
          <div class="gcse-search" enableAutoComplete="true"></div>
        </div>
        <div class="login-button-div">
          <% if (user) { %>
          <img class="top-bar-account-icon" src="<%= user.image %>" />
          <% } else { %>
          <button class="login-button">로그인</button>
          <% } %>
        </div>
      </div>
      <div class="top-static-header-row top-static-header-category">
        <nav class="header-category"><%- page_header_category %></nav>
      </div>
    </header>
    <main class="main-wrap">
      <div class="sidebar-wrap">
        <nav class="sidebar-categories sidebar-box">
          <%- articles_in_category %>
        </nav>
        <nav class="toc-container sidebar-box">
          <div class="toc-header sidebar-box-header">목차</div>
          <ol class="toc-list"></ol>
        </nav>
        <div class="sidebar-box">
          <div class="sidebar-adsense-header sidebar-box-header">후원 광고</div>
          <div class="adsense-sidebar">
            <script
              async
              src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
            ></script>
            <ins
              class="adsbygoogle"
              style="display: inline-block; width: 160px; height: 600px"
              data-ad-client="ca-pub-6608926154840997"
              data-ad-slot="1458582864"
            ></ins>
            <script>
              (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
          </div>
        </div>
      </div>
      <div class="article-content-wrap">
        <article class="article-content">
          <div class="article-content-header">
            <h2>
              <a href="/" title="Home">모두의 코드</a><br />
              <small><%= file_info.title %></small>
            </h2>
            <div class="additional-info">
              <% if (file_info.publish_date) { %>
              <small class="publish-date"
                >작성일 : <%= file_info.publish_date %></small
              >
              <% } %> <% if (view_cnt) { %>
              <small class="view-cnt"
                >이 글은 <%= view_cnt %> 번 읽혔습니다.
              </small>
              <% } %>
            </div>
          </div>
          <%- include(content_url) %>
          <section class="comment-section">
            <div id="num-comment">
              <i class="xi-comment-o"></i>
              <% if (num_comment > 0 ) { %> 댓글이
              <span><%- num_comment %></span> 개 있습니다! <% } else { %> 첫
              댓글을 달아주세요! <% } %>
            </div>
            <div id="comment-box">
              <section id="comment-post-section" class="comment-post-section">
                <div class="post-box">
                  <div class="profile-pic">
                    <% if (user) { %>
                    <div id="username" class="small-comment font-bold">
                      <%= user.name %>
                    </div>
                    <img src="<%= user.image %>" />
                    <% } else { %>
                    <img src="/img/unknown_person.png" alt="프로필 사진 없음" />
                    <% } %>
                  </div>
                  <div class="text-area-wrapper">
                    <textarea
                      id="posted-comment"
                      class="comment-textarea"
                      placeholder="댓글은 글쓴이에게 큰 힘이 됩니다"
                    ></textarea>
                    <div class="comment-helper">
                      강좌에 관련 없이 궁금한 내용은
                      <a href="https://forum.modoocode.com/"
                        >여기를 사용해주세요</a
                      ><i class="em em-smile"></i>
                    </div>
                  </div>
                </div>
                <div class="login-box">
                  <% if (!user) { %>
                  <div class="social-login">
                    <div class="small-comment">다음으로 로그인</div>
                    <div
                      id="g_id_onload"
                      data-client_id="746982907013-o9irphhicai1dm23eru7sf4ir6g605f7.apps.googleusercontent.com"
                      data-context="signin"
                      data-ux_mode="popup"
                      data-callback="onGoogleLogin"
                      data-auto_prompt="true"
                    ></div>
                    <div
                      class="g_id_signin"
                      data-type="standard"
                      data-shape="rectangular"
                      data-theme="outline"
                      data-text="signin_with"
                      data-size="medium"
                      data-logo_alignment="left"
                    ></div>
                  </div>
                  <div class="manual">
                    <div class="small-comment">
                      또는 직접 입력하세요 (댓글 수정시 비밀번호가 필요합니다)
                    </div>
                    <input
                      name="name"
                      id="name"
                      class="comment-box-name"
                      placeholder="이름"
                    />
                    <input
                      name="password"
                      id="password"
                      class="comment-box-class"
                      type="password"
                      placeholder="비밀번호"
                    />
                  </div>
                  <% } %>
                  <div id="adding-comment" class="sk-fading-circle">
                    <div class="sk-circle1 sk-circle"></div>
                    <div class="sk-circle2 sk-circle"></div>
                    <div class="sk-circle3 sk-circle"></div>
                    <div class="sk-circle4 sk-circle"></div>
                    <div class="sk-circle5 sk-circle"></div>
                    <div class="sk-circle6 sk-circle"></div>
                    <div class="sk-circle7 sk-circle"></div>
                    <div class="sk-circle8 sk-circle"></div>
                    <div class="sk-circle9 sk-circle"></div>
                    <div class="sk-circle10 sk-circle"></div>
                    <div class="sk-circle11 sk-circle"></div>
                    <div class="sk-circle12 sk-circle"></div>
                  </div>
                  <button id="post-comment" class="comment-btn">
                    댓글 달기
                  </button>
                </div>
              </section>
              <section id="comment-list-section">
                <ul id="root-comment-list" class="comment-list">
                  <p>댓글을 불러오는 중입니다..</p>
                </ul>
              </section>
              <div id="button-box" hidden>
                <button id="open-comment">댓글 더 보기</button>
              </div>
            </div>
          </section>
        </article>
      </div>
    </main>
  </body>
</html>

<script>
  function getNumTotalComments() {
    return <%- num_comment %>;
  }

  (function () {
    var cx = '003869586044905610715:visr8hwbmrq';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
