{% load i18n %}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{ paper.title }}</title>
    <!--<script type="text/javascript">
      console.log('aa');
		document.write("JavaScript works!");
	</script>-->


    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            line-height: 1.5;
            margin: 0;
            padding: 0;
        }

        h1, h2, h3 {
            font-weight: bold;
        }

        h1 {
            font-size: 28px;
            margin-bottom: 20px;
        }

        h2 {
            font-size: 20px;
            margin-top: 30px;
            margin-bottom: 10px;
        }

        p, ul, li {
            margin: 0;
            padding: 0;
        }

        a {
            color: #0077cc;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        ul {
            list-style: none;
            margin-top: 10px;
            margin-bottom: 20px;
        }

        ul li {
            margin-bottom: 5px;
        }

        .summary, .lay-summary, .blog {
            margin-top: 30px;
            margin-bottom: 30px;
        }

        .summary p, .lay-summary p, .blog p {
            margin-bottom: 10px;
            text-align: justify;
            text-justify: inter-word;
        }

        .blog {
            padding-top: 20px;
        }

        .label {
          display: flex;
          align-items: center;
          font-size: 14px;
          font-weight: bold;
          margin-right: 8px;
        }

        .keywords {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: 8px;
          max-width: 100%;
          margin-top:20px;
        }


        .keyword {
          display: inline-block;
          margin-right:8px;
          margin-left:8px;
          background-color: #f5f5f5;
          color: #333;
          font-size: 14px;
          font-weight: bold;
          padding: 4px 8px;
          border-radius: 4px;
          box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
        }
        .arx {
          font-size: 16px;
          color: #555;
          margin-top: 10px;
          margin-bottom: 10px;
        }
        .blog h1 {
          font-size: 17px; /* or any other size you prefer */
          font-style: italic;
        }
    </style>
</head>
<body>
    <h1>{{ paper.title }}</h1>
    <p class="arx">arXiv: {{ paper.arxiv_id }}</p>
    <p><a href="{{ link }}" target="_blank">{% trans 'Read the full paper here' %}</a></p>

    {% if keywords %}
      <div class="keywords">
        <span class="label">{% trans 'AI-generated keywords:' %}
        {% for kw in keywords %}
          <span class="keyword">{{ kw }}</span>
        {% endfor %}
        </span>
      </div>
    {% endif %}

    <div class="summary">
        <h2>{% trans 'AI-generated Summary' %}</h2>
        <p>{{ sumpaper.summary }}</p>
    </div>
    <div class="notes">
        <h2>{% trans 'AI-generated Key Points' %}</h2>
        <ul>
            {% for note in notes %}
                <li>{{ note }}</li>
            {% endfor %}
        </ul>
    </div>
    <div class="lay-summary">
        <h2>{% trans 'AI-generated Lay Summary' %}</h2>
        <p>{{ sumpaper.lay_summary }}</p>
    </div>
    <div class="blog">
        <h2>{% trans 'AI-generated Blog-like Article' %}</h2>
        <p>{{ sumpaper.blog|safe }}</p>
    </div>
    <p>{% trans 'From' %} <a href="https://www.summarizepaper.com/">SummarizePaper.com</a> (<span id="local-time">{{ now }}</span>)</p>


        <script type="text/x-mathjax-config">
        MathJax.Hub.Config({
            messageStyle: "none",
            TeX: {},
            tex2jax: {
            inlineMath: [['$','$'], ['\\(','\\)']],
            displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
            processEscapes: true,
            },
            "HTML-CSS": {
                scale : 100,
                minScaleAdjust: 110
            },
        });
        MathJax.Hub.Queue(["Rerender", MathJax.Hub], function () {window.status="finished"})
    </script>
    <!--<script type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">
    </script>-->
    <script type="text/javascript"
       src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_HTML">
   </script>
    <!--<script>
    MathJax.typeset();
    window.status = "pdfkit-OK";*/ // Signal that MathJax is ready
  </script>-->

</body>
</html>
