{% extends "base_sidebar.html" %}

{% block seo %}
  <link rel="canonical" href="https://www.pythoncheatsheet.org/blog/{{ post.url }}">
  <meta property="og:url" content="https://www.pythoncheatsheet.org/blog/{{ post.url }}">
  <meta name="description" content="{{ g.md(post.summary)|striptags|truncate(250) }}">
  <meta property="og:description" content="{{ g.md(post.summary)|striptags }}">
  <meta name="twitter:description" content="{{ g.md(post.summary)|striptags }}" />
{% endblock seo %}

{% block schema %}
  <script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "Article",
    "headline": "{{ post.title }}",

    "image": {
      "@type": "ImageObject",
      "url": "{{ post.img_url }}"
    },

    "mainEntityOfPage": {
      "@type": "WebPage",
      "@id": "https://www.pythoncheatsheet.org/blog/{{ post.url }}"
    },
    "datePublished": "{{ post.timestamp }}",
     "publisher": {
      "@type": "Organization",
      "name": "Python Cheatsheet",
      "logo": {
        "@type": "ImageObject",
        "url": "https://www.pythoncheatsheet.org{{ url_for( "static", filename="img/snake.png" ) }}",
        "width": 60,
        "height": 60
      }
    },
    "author": {
      "@type": "Organization",
      "name": "Python Cheatsheet",
      "url": "https://www.pythoncheatsheet.org",
      "logo": "https://www.pythoncheatsheet.org{{ url_for( "static", filename="img/snake.png" ) }}"
    },
    "description": "{{ g.md(post.summary)|striptags|truncate(250) }}"
  }
  </script>
{% endblock schema %}

{% block stylesheet %}
  <link rel="stylesheet" href={{ url_for( "static", filename="css/carbon-blog.min.css" ) }}>
{% endblock stylesheet %}


{% block main_column %}
  <!-- delete, edit, new -->
  {% if post.author.username == current_user.username %}
  <div id="articleEdits" class="column is-4 is-offset-8 del-edit-new-hidden editor ">
    <div class="level">

      <!-- delete -->
      <span class="icon level-item">
        <a id="deleteArticleBtn" class="articleDeleteModalBtn" href="javascript:void(0);">
          <i class="far fa-trash-alt"></i> Delete</a>
      </span>

      <!-- edit -->
      <span class="icon level-item">
        <a href="{{ url_for('dashboard.edit_post', url=post.url) }}">
          <i class="far fa-edit"></i> Edit</a>
      </span>

      <!-- new -->
      <span class="icon level-item">
        <a href="{{ url_for('dashboard.new_post') }}">
          <i class="fas fa-plus"></i> New</a>
      </span>
       </div>
    </div>
  {% endif %}

  <!-- article title -->
  <div class="header-content art-title">
    <div class="has-text-centered">
      <h1 class="title is-2 no-h1 is-size-4-mobile">
        {{ title }}
      </h1>
    </div>
  </div>

  <!-- time and author name -->
  <div class="has-text-centered article-botton-space">
    <p class="no-p">posted on
      <a>{{ moment(post.timestamp).format('L') }}</a> by
      <a href="{{ url_for('main.author', username=post.author.username) }}">{{ post.author.screen_name }}</a>
    </p>
  </div>

  <!-- post body -->
  <div class="content img-cent article-body">
    <!-- article img -->
    <div>
      <img src="{{ post.img_url }}" alt="{{ post.title }}">
    </div>
    <br>
    <p>{{ g.md(md_body)|safe }}</p>
    <hr>
    <div class="level">
      <!-- tags -->
      <div class="level-left">
        <p>Tags: {% for tag in post.tag %}
          <a href="{{ url_for('main.tag', tag=tag.name) }}">
            <span class="tag is-warning">
              {{tag.name}}
            </span>
          </a>
          {% endfor %}
        </p>
      </div>

      <!-- buy me a coffee -->
      <div class="level-right">
        <link href="https://fonts.googleapis.com/css?family=Cookie" rel="stylesheet">
        <a class="bmc-button has-text-centered"
          target="_blank" href="https://www.buymeacoffee.com/8owKkSBUC"><img src="https://www.buymeacoffee.com/assets/img/BMC-btn-logo.svg"
            alt="Buy me a coffee"><span style="margin-left:5px">Buy
            me a coffee</span></a>
      </div>
    </div>
  </div>
  <br><br>

  <div id="disqus_thread">
    <div id="comments"></div>
    <script>
      (function () { // DON'T EDIT BELOW THIS LINE
        var d = document,
          s = d.createElement('script');
        s.src = 'https://python-cheatsheet.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
      })();
    </script>
    <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a>
    </noscript>
  </div>

  <!-- delete modal -->
  <div id="deleteModal" class="modal">
    <div id="articleModalBackground" class="modal-background"></div>
    <div class="modal-content box has-text-centered section">
      <h3 class="subtitle">Do you want to Delete {{ post.title }}?</h3>
      <br>
      <div class="columns is-centered">
        <div class="column is-3">
          <form action="{{ url_for('dashboard.delete_post', url=post.url) }}" method=post>
            <input type="hidden" name="entry_id">
            <button class="button is-danger is-outlined">Delete</button>
          </form>
        </div>
        <div class="column is-3">
          <button id="cancel" class="button is-outlined">Cancel</button>
        </div>
      </div>
    </div>
    <button id="closeBtn" class="modal-close is-large" aria-label="close"></button>
  </div>
{% endblock main_column %}

<!-- sidebar -->
{% block side_column %}
  {% include 'main/_default_sidebar.html' %}
  <!-- load the article in the sidebar only in mobil view -->
  {% include 'main/_mobile_article.html' %}
{% endblock side_column %}


{% block js %}
  <!-- addthis javascript -->
  <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5b05cb2ae9e75f31"></script>

  <!-- addthis customize -->
  <script type="text/javascript">
    var addthis_share = {
      url: "www.pythoncheatsheet.org/blog/{{ post.url }}",
      title: "{{ title }} - {{ g.site_name }}",
    };
  </script>
{% endblock js %}