[REFACTOR] update navbar and comment

app/templates/app/detail_materi.html

@@ -2,13 +2,14 @@
 {% load static %}
 
 {% block header %}
+  <link href="{% static 'css/sb-admin-2.min.css' %}" rel="stylesheet">
 <link rel="stylesheet" type="text/css" href="{% static 'app/css/detail_materi.css' %}">
 <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;1,100&display=swap" rel="stylesheet">
 <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v6.0"></script>
 {% endblock header %}
 
 {% block title %}
-Materi
+{{materi_data.title}} | Digipus
 {% endblock title %}
 
 {% block content %}
@@ -56,8 +57,8 @@ Materi
             <li class="nav-item dropdown no-arrow">
               <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown"
                 aria-haspopup="true" aria-expanded="false">
-                <span class="mr-2 d-none d-lg-inline text-gray-600 small">Admin</span>
-                <img class="img-profile rounded-circle" src="https://source.unsplash.com/QAB-WJcbgJk/60x60" alt="User profile picture">
+                <span class="mr-2 d-none d-lg-inline text-gray-600 small">{{ user.name }}</span>
+                <img class="img-profile rounded-circle" src="{{ user.profile_picture.url }}" alt="User profile picture">
               </a>
             </li>
 
@@ -136,9 +137,11 @@ Materi
                     <li class="nav-item">
                         <a class="nav-link" href="#deskripsi">Deskripsi</a>
                     </li>
+                    {% if materi_data.status == "APPROVE" %}
                     <li class="nav-item">
                         <a class="nav-link" href="#komentar">Komentar</a>
                     </li>
+                    {% endif %}
                 </ul>
             </nav>
             <div id="deskripsi" class="container-fluid description-wrapper bg-white shadow-sm rounded p-3">
@@ -147,35 +150,37 @@ Materi
                     <p>{{materi_data.descriptions}}</p>
                 </div>
             </div>
-            <div id="komentar" class="container-fluid comments-wrapper p-0">
-                <div class="add-comments col col-8 bg-white shadow-sm rounded p-3 mb-3">
-                    <form method="POST">
-                        {% csrf_token %}
-                        <h1>Komentar</h1>
-                        <div class="form-group">
-                            <textarea placeholder="Beri komentar..." class="form-control" 
-                                    id="exampleFormControlTextarea1" 
-                                    rows="3" name="comment" required
-                            ></textarea>
-                            <button type="submit" class="btn btn-link btn-book shadow-sm p-2 mt-2 bg-white rounded">Kirim</button>
+            {% if materi_data.status == "APPROVE" %}
+                <div id="komentar" class="container-fluid comments-wrapper p-0">
+                    <div class="add-comments col col-8 bg-white shadow-sm rounded p-3 mb-3">
+                        <form method="POST">
+                            {% csrf_token %}
+                            <h1>Komentar</h1>
+                            <div class="form-group">
+                                <textarea placeholder="Beri komentar..." class="form-control" 
+                                        id="exampleFormControlTextarea1" 
+                                        rows="3" name="comment" required
+                                ></textarea>
+                                <button type="submit" class="btn btn-link btn-book shadow-sm p-2 mt-2 bg-white rounded">Kirim</button>
+                            </div>
+                        </form>
+                    </div>
+                    {% for comment in comment_data %}
+                        <div class="col col-8 comment shadow-sm p-3 mb-1 bg-white rounded">
+                            <div class="d-flex bd-highlight mb-3 align-items-center user">
+                                <span style="background-color: #{{comment.profile}}" class="profile p-1 bd-highligh"></span>
+                                <p class="p-1 bd-highligh m-0"><b>{{comment.user}}</b></p>
+                                {% if user.is_admin %}
+                                <a class="ml-auto p-1 bd-highlight close" href="{% url 'delete-comment' materi_data.id comment.id %}">
+                                    <span aria-hidden="true">&times;</span>
+                                </a>
+                                {% endif %}
+                            </div>
+                            <p class="text">{{comment.comment}}</p>
                         </div>
-                    </form>
+                    {% endfor %}
                 </div>
-                {% for comment in comment_data %}
-                    <div class="col col-8 comment shadow-sm p-3 mb-1 bg-white rounded">
-                        <div class="d-flex bd-highlight mb-3 align-items-center user">
-                            <span style="background-color: #{{comment.profile}}" class="profile p-1 bd-highligh"></span>
-                            <p class="p-1 bd-highligh"><b>{{comment.user}}</b></p>
-                            {% if user.is_admin %}
-                            <a class="ml-auto p-1 bd-highlight close" href="{% url 'delete-comment' materi_data.id comment.id %}">
-                                <span aria-hidden="true">&times;</span>
-                            </a>
-                            {% endif %}
-                        </div>
-                        <p class="text">{{comment.comment}}</p>
-                    </div>
-                {% endfor %}
-            </div>
+            {% endif %}
         </div>
     </div>
     <footer class="sticky-footer bg-white p-4">