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

{% block style %}
<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.min.css">
<link rel="stylesheet" href="{% static 'css/fastselect.css' %}">
{% endblock %}

{% block title %}
    <title>Add news</title>
{% endblock %}

{% block content %}
<main class="pt-2 pb-5">
    <div class="container">
        <form class="form" method="post">
            {% csrf_token %}
            <section class="mb-5">
                <h5 class="offset-1 display-5 mb-2">Add</h5>
                <!-- Title -->
                <div class="form-group row">
                    <label for="title" class="offset-1 col-2 col-form-label">Title</label>
                    <div class="col-6">
                        <input class="form-control" type="text" placeholder="Some title..." id="title" name="title">
                        <!--<input type="hidden" name="news_id" value="{{ news.id }}">-->
                    </div>
                </div>

                <!-- Description -->
                <div class="form-group row">
                    <label for="description" class="offset-1 col-2 col-form-label">Description</label>
                    <div class="col-6">
                        <textarea class="form-control" type="text" placeholder="Some description..." id="description"
                                  name="description" rows="7"></textarea>
                    </div>
                </div>

                <!-- Url -->
                <div class="form-group row">
                    <label for="url" class="offset-1 col-2 col-form-label">Url</label>
                    <div class="col-6">
                        <input class="form-control" type="text" placeholder="Some url..." id="url" name="url">
                    </div>
                </div>
                <!-- Entity -->
                <div class="form-group row has-success">
                    <label for="entity" class="offset-1 col-2 col-form-label">Entity</label>
                    <div class="col-6">
                        <input
                                type="text"
                                id="entity"
                                data-url="{% url 'auto' slug='entity' %}"
                                data-load-once="true"
                                class="multiselect singleInputDynamic"
                                name="entity"/>
                        <div class="form-control-feedback">Select company from list</div>
                    </div>
                    <!--<div class="col-3">
                      <button class="btn btn-primary">Add entity</button>
                    </div>-->
                </div>

                <!-- Radar -->
                <div class="form-group row">
                    <label for="radar" class="offset-1 col-2 col-form-label">Radar</label>
                    <div class="col-6">
                        <input
                                type="text"
                                id="radar"
                                data-url="{% url 'auto' slug='radar' %}"
                                data-load-once="true"
                                class="multiselect singleInputDynamic"
                                name="radar"/>
                    </div>
                </div>

                <!-- Industry -->
                <div class="form-group row">
                    <label for="industry" class="offset-1 col-2 col-form-label">Industry</label>
                    <div class="col-6">
                        <input
                                type="text"
                                id="industry"
                                multiple
                                class="multiselect"
                                data-url="{% url 'auto' slug='industry' %}"
                                data-load-once="true"
                                name="industry"/>
                    </div>
                </div>

                <!-- Function -->
                <div class="form-group row">
                    <label for="function" class="offset-1 col-2 col-form-label">Function</label>
                    <div class="col-6">
                        <input
                                type="text"
                                id="function"
                                multiple
                                class="multiselect"
                                data-url="{% url 'auto' slug='function' %}"
                                data-load-once="true"
                                name="function"/>
                    </div>
                </div>

                <!-- Media -->
                <div class="form-group row">
                    <label for="media" class="offset-1 col-2 col-form-label">Media</label>
                    <div class="col-6">
                        <div class="row">
                            <div class="col-12">
                                <input
                                        type="text"
                                        id="media"
                                        class="multiselect"
                                        data-url="{% url 'auto' slug='media' %}"
                                        data-load-once="true"
                                        name="media"/>
                            </div>
                            <!--<div class="col-3">
                              <button class="btn btn-primary">Add media</button>
                            </div>-->
                        </div>
                    </div>
                </div>

                <!-- Technology -->
                <div class="form-group row">
                    <label for="technology" class="offset-1 col-2 col-form-label">Technology</label>
                    <div class="col-6">
                        <input
                                type="text"
                                id="technology"
                                multiple
                                class="multiselect"
                                data-url="{% url 'auto' slug='technology' %}"
                                data-load-once="true"
                                name="technology"/>
                    </div>
                </div>

                <!-- Type -->
                <div class="form-group row">
                    <label for="type" class="offset-1 col-2 col-form-label">Type</label>
                    <div class="col-3">
                        <input
                                type="text"
                                id="type"
                                class="multiselect"
                                data-url="{% url 'auto' slug='type' %}"
                                data-load-once="true"
                                name="type"/>
                    </div>
                </div>

                <!-- Region -->
                <div class="form-group row">
                    <label for="region" class="offset-1 col-2 col-form-label">Region</label>
                    <div class="col-3">
                        <input
                                type="text"
                                id="region"
                                class="multiselect"
                                data-url="{% url 'auto' slug='region' %}"
                                data-load-once="true"
                                name="region"/>
                    </div>
                </div>

                <!-- Publish Date -->
                <div class="form-group row">
                    <label for="publish-date" class="offset-1 col-2 col-form-label">Publish Date</label>
                    <div class="col-3">
                        <input  type="date" class="form-control" placeholder="Choose a date" name="date">
                    </div>
                </div>

                <!-- Tag -->
                <div class="form-group row">
                    <label for="tag" class="offset-1 col-2 col-form-label">Tag</label>
                    <div class="col-6">
                        <input
                                type="text"
                                multiple
                                id="tag"
                                class="multiselect"
                                data-url="{% url 'auto' slug='tags' %}"
                                data-load-once="true"
                                name="tags"/>
                    </div>
                </div>
                <!-- Submit -->
                <div class="form-group row">
                    <div class="offset-8 col-2 pull-right">
                        <a class="form-control btn btn-danger" href="/news">Cancel</a>
                    </div>
                    <div class="col-2">
                        <button type="submit" class="form-control btn btn-primary">Create</button>
                    </div>
                </div>
            </section>
        </form>
    </div>
</main>
{% endblock %}

{% block script %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<script src="http://dbrekalo.github.io/fastselect/dist/fastselect.standalone.js"></script>
{% endblock %}