detail_materi.html

{% extends 'base.html' %}
{% load static %}

{% block header %}
<link rel="stylesheet" type="text/css" href="{% static 'app/css/detail_materi.css' %}">
<script src="{% static 'app/js/detail_materi.js' %}"></script>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;1,100&display=swap" rel="stylesheet">
{% endblock header %}

{% block title %}
Materi
{% endblock title %}

{% block content %}
    {% block verification %} {% endblock verification %}
    <div class="container">
        <div class="row materi-data">
            <div class="col col-3 cover">
                <img src={{materi_data.cover}} alt="cover">
            </div>
            <div class="col col-6 ml-3 book">
                <h2>{{materi_data.title}}</h2>
                <div class="category-wrapper">
                    {% for category in materi_data.categories.all %}
                        <span class="mr-1">#{{category.name}}</span>
                    {% endfor %}
                </div>
                <div class="info-wrapper">
                    <div class="info" id="1">
                        <dt class="col col-4">
                            <p class="info-name">Penulis</p>
                        </dt>
                        <dd>
                            <p class="info-content">{{materi_data.author}}</p>
                        </dd>
                    </div>
                    <div class="info" id="1">
                        <dt class="col col-4">
                            <p class="info-name">Penerbit</p>
                        </dt>
                        <dd>
                            <p class="info-content">{{materi_data.publisher}}</p>
                        </dd>
                    </div>
                    <div class="info" id="1">
                        <dt class="col col-4">
                            <p class="info-name">Jumlah Halaman</p>
                        </dt>
                        <dd>
                            <p class="info-content">{{materi_data.author}}</p>
                        </dd>
                    </div>
                    <div class="info" id="1">
                        <dt class="col col-4">
                            <p class="info-name">Ukuran File</p>
                        </dt>
                        <dd>
                            <p class="info-content">5 Mb</p>
                        </dd>
                    </div>
                </div>
                <button class="btn btn-link btn-book shadow-sm p-2 mb-1 bg-white rounded">Baca</button>
                <button class="btn btn-link btn-book shadow-sm p-2 mb-1 bg-white rounded">Unduh</button>
                <button class="btn btn-link btn-book shadow-sm p-2 mb-1 bg-white rounded">Bagikan</button>
            </div>
        </div>
        <div class="row menu-wrapper">
                <nav class="navbar navbar-expand-sm">  
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#section1">Deskripsi</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#section2">Komentar</a>
                        </li>
                    </ul>
                </nav>
                <div id="section1" class="container-fluid description-wrapper">
                    <h1>Deskripsi</h1>
                    <div class="col col-8 description">
                        <p>{{materi_data.descriptions}}</p>
                    </div>
                </div>
                <div id="section2" class="container-fluid comments-wrapper">
                    <h1>Komentar</h1>
                    <div class="add-comments col col-8 ">
                        <form method="POST">
                            {% csrf_token %}
                            <div class="form-group">
                                <textarea placeholder="komentar..." 
                                            class="form-control mb-2" 
                                            id="exampleFormControlTextarea1" 
                                            rows="3"
                                            name="comment">
                                </textarea>
                                <button type="submit" class="btn btn-book shadow-sm p-2 mb-1 bg-white rounded">Kirim</button>
                            </div>
                        </form>
                        
                    </div>
                    {% for comment in materi_data.comments.all %}
                        <div class="col col-8 comment shadow-sm p-3 mb-1 bg-white rounded">
                            <div class="user">
                                <span class="profile"></span>
                                <p><b>{{comment.user}}</b></p>
                            </div>
                            <p class="text">{{comment.comment}}</p>
                        </div>
                    {% endfor %}
                </div>
            <!-- <div class="col col-12">
                <nav id="navbar-example2" class="navbar ">
                    <ul class="nav nav-pills">
                        <li class="nav-item">
                        <a class="nav-link" href="#fat">Deskripsi</a>
                        </li>
                        <li class="nav-item">
                        <a class="nav-link" href="#mdo">Komentar</a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="col col-8 offset-md-1">
                <div data-spy="scroll" data-target="#navbar-example2" data-offset="0">
                    <div class="description-wrapper">
                        <h4 id="fat">Deskripsi</h4>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                    </div>
                    
                </div>
            </div> -->
        </div>
    </div>
{% endblock content %}