{% extends 'base.html' %}
{% load static %}
{% block detail-style %}
<!-- BootStrap CSS Link -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'blogs/css/detail-style.css' %}">
<link rel="stylesheet" href="{% static 'blogs/css/tomorrow-night-bright.css' %}">
{% endblock detail-style %}

{% block content %}

<!-- マークダウン記法のリスト -->
{% include 'blogs/markdown_modal.html' %}

<!-- コンテナ内　記事更新フォーム・マークダウンのコード -->
<div class="blogs-title container">

  <!-- 非表示リストに戻るリンク -->
  <a class="text-violet" href="{% url 'blogs:detail' blog.pk %}">記事詳細へ戻る</a>

  <!-- 記事更新フォーム -->
  <!-- FormViewで使用する場合、action="{ url 'blogs:edit_blog' blog.pk %}"のやり方もある。 -->
  <form action="" method="POST">
    {% csrf_token %}
    {% for field in form %}
    <div class="form-group">
      <label for="{{ field.id }}">{{field.label_tag }}</label>
      {{ field }}
    </div>
    {% endfor %}
    <button type="submit" class="btn btn-primary btn-sm">再投稿</button>
  </form>
  <!-- 記事更新フォーム終 -->

  <!-- markdownxのプレビュー表示 -->
  {{ form.media }}

</div>
<br>
<br>

<!-- BootStrap jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

{% endblock %}
