Add course lock popup

apps/course/templates/course/course.html

@@ -138,7 +138,8 @@
       </div>
       <div class="course__actions">
         <a href="{% url 'course' course.id %}" class="course__action btn btn_lg btn_stroke">Описание курса</a>
-        {% if request.user.role == request.user.AUTHOR_ROLE or request.user.role == request.user.ADMIN_ROLE %}
+        {% if request.user.is_authenticated %}
+        {% if cource.author == request.user and request.user.role == request.user.AUTHOR_ROLE or request.user.role == request.user.ADMIN_ROLE %}
         <a
           href="{% url 'course-only-lessons' course.id %}"
           class="course__action btn btn_lg btn_gray"
@@ -147,8 +148,12 @@
         </a>
         {% else %}
         <a
-          href="{% if paid %}{% url 'course-only-lessons' course.id %}{% else %}#{% endif %}"
           class="course__action btn btn_lg btn_gray"
+          {% if paid %}
+          href="{% url 'course-only-lessons' course.id %}"
+          {% else %}
+          data-popup=".js-popup-course-lock"
+          {% endif %}
           >УРОКИ
           {% if not paid %}
           <svg class="icon icon-lock">
@@ -157,6 +162,7 @@
           {% endif %}
         </a>
         {% endif %}
+        {% endif %}
       </div>
       <a class="course__video video" href="#">
         {% if course.cover %}

project/templates/lilcity/index.html

@@ -477,6 +477,20 @@
       </div>
     </div>
   </div>
+  {% if course %}
+  <div class="popup js-popup-course-lock">
+    <div class="popup__wrap popup__wrap_md js-popup-wrap">
+      <div class="popup__body">
+        <div class="lock">
+          <div class="lock__label">ЧТОБЫ ПРОДОЛЖИТЬ ПРОСМОТР</div>
+          <div class="lock__title title">Как просто научиться рисовать простых персонажей.</div>
+          <div class="lock__content">Этот курс поможет детям узнать о том как из простых форм создавать веселый и харизматичных персонажей.</div>
+          <a href="{% url 'course-checkout' course.id %}" class="lock__btn btn">КУПИТЬ КУРС</a>
+        </div>
+      </div>
+    </div>
+  </div>
+  {% endif %}
 </div>
 <script type="text/javascript" src={% static "app.js" %}></script>
 <script>