{% extends "base/module_base.html" %}

{% set active_page ='category' %}

{% block pagehead %}
<title>edit</title>
  <style type="text/css">
  .carousel-control-prev, .carousel-control-next{
    height: 100px;
  }
  .carousel-control-prev-icon,
.carousel-control-next-icon {
  /*height: 50px;*/
  /*width: 100px;*/
  /*border-radius: 50%;*/
  /*border: 1px solid black;*/
  background-image: none !important;
  background: none !important;
  /*font-size: 55px;*/
  /*color: red;*/
}

.carousel-control-next-icon:after
{
  content: '>';
  font-size: 55px;
  color: red;
}

.carousel-control-prev-icon:after {
  content: '<';
  font-size: 55px;
  color: red;
}
</style>
{% endblock %}



{% block sidebar %}
  {%include 'category/blocks/sidebar.html'%}
{%endblock%}



{% block content %}
  <br>
<form action='/category/update' method="post" enctype="multipart/form-data">
  <label>Name</label>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text"><i class="fa fa-tag"></i></span>
    </div>
    <input required  id="category" type="text" class="form-control" 
      name="category_name" value="{{ category.name}}" autocomplete="off">
    
    <input required  id="category2" type="hidden" class="form-control" 
      name="old_category_name" value="{{ category.name }}">
  </div>


{%if len(category.resources) == 0%}
  <label>add image for {{category.name}}</label>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text"><i class="fa fa-list-alt"></i></span>
    </div>
    <input class="form-control" type="file" name="photo" autocomplete="off" >
  </div>
  <br>
  {%else%}
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">

    {%for resource in category.resources%}
      {%if resource.type == 'image'%}
      <div class="carousel-item {{'active' if loop.index == 1 else ''}}">
        <img class="d-block" width=300 src="{{url_for('category.category_image', filename=resource.filename)}}" alt="---">

        <a style="margin-top: 10px" class="btn btn-danger" 
        href="{{url_for('category.category_image_delete', category_name=category.name, filename=resource.filename)}}">delete</a>
      </div>
      {%endif%}
    {%endfor%}
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
  <br>
</div>

  <br>
  Delete image to be able to add new
  <br>
  {%endif%}


  <br>
  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
  <input required  type="submit" class="btn btn-info" value="edit">
</form>
{% endblock %}