{% extends 'base.html' %}

{% block content %}
<h1>{% block title %} Add a New Resource{% endblock %}</h1>
        <form method="POST" action="/create" id="resource">
            <div class="mb-3 mt-3">
              <label for="type">Type</label>
              <select class="form-select" id="resource_type" name="resource_type" form="resource">
                  <option selected="selected">Please choose</option>
                  <option value="tool">Tool</option>
                  <option value="practice">Practice</option>
                  <option value="publisher">Publisher</option>
                  <option value="book">Book</option>
              </select>
            </div>
            <div id="resource_type_tool" class="resource_type_input" style="display: none;">
                <div class="mb-3 mt-3">
                    <label for="tool_name">Tool name</label>
                    <input class="form-control" type="text" name="tool_name" placeholder="Tool name" autofocus="">
                </div>

                <div class="mb-3 mt-3">
                    <label for="description">Short description</label>
                    <textarea class="form-control" rows="4" type="text" name="description" placeholder="Tool description" autofocus=""></textarea>
                </div>

                <div class="mb-3 mt-3">
                    <label for="projectUrl">Project URL</label>
                    <input class="form-control" type="text" name="projectUrl" placeholder="Project URL" autofocus="">
                </div>

                <div class="mb-3 mt-3">
                    <label for="repositoryUrl">Repository URL</label>
                    <input class="form-control" type="text" name="repositoryUrl" placeholder="Repository URL" autofocus="">
                </div>

                <div class="mb-3 mt-3">
                    <label for="expertiseToUse">Expertise required to use</label>
                    <input class="form-control" type="text" name="expertiseToUse" placeholder="Expertise required to use" autofocus="">
                </div>

                <div class="mb-3 mt-3">
                    <label for="expertiseToHost">Expertise required to self-host</label>
                    <input class="form-control" type="text" name="expertiseToHost" placeholder="Expertise required to self-host" autofocus="">
                </div>

                <div class="mb-3 mt-3">
                    <label for="dependencies">Technical dependencies</label>
                    <input class="form-control" type="text" name="dependencies" placeholder="Technical dependencies" autofocus="">
                </div>

                <div class="mb-3 mt-3">
                    <label for="ingestFormats">Import / ingest formats</label>
                    <input class="form-control" type="text" name="ingestFormats" placeholder="Import / ingest formats" autofocus="">
                </div>

                <div class="mb-3 mt-3">
                    <label for="outputFormats">Output formats</label>
                    <input class="form-control" type="text" name="outputFormats" placeholder="Output formats" autofocus="">
                </div>

                <div class="mb-3 mt-3">
                    <label for="status">Platform status</label>
                    <input class="form-control" type="text" name="status" placeholder="Platform status" autofocus="">
                </div>

                <div class="mb-3 mt-3">
                    <label for="linked_practice_id">Linked resources</label>
                </div>
                <div class="mb-3 mt-3">
                    <select name="linked_resources" id="linked_resources" aria-label="Linked resources" class="selectpicker" data-live-search="true" multiple>
                      {% for resource_dropdown in resource_dropdown %}
                        {% if resource_dropdown['type'] != 'tool' %}
                          <option value="{{ resource_dropdown['id'] }}">{{ resource_dropdown['name'] }}</option>
                        {% endif %}
                      {% endfor %}
                    </select>
                </div>
            </div>
            <div id="resource_type_practice" class="resource_type_input" style="display: none;">
                <div class="mb-3 mt-3">
                    <label for="practice_name">Practice name</label>
                    <input class="form-control" type="text" name="practice_name" placeholder="Practice name" autofocus="">
                </div>

                <div class="mb-3 mt-3">
                    <label for="description">Practice description</label>
                    <textarea class="form-control" rows="4" type="text" name="description" placeholder="Practice description" autofocus=""></textarea>
                </div>
            </div>
            <div id="resource_type_publisher" class="resource_type_input" style="display: none;">
                <div class="mb-3 mt-3">
                    <label for="publisher_name">Publisher name</label>
                    <input class="form-control" type="text" name="publisher_name" placeholder="Publisher name" autofocus="">
                </div>

                <div class="mb-3 mt-3">
                    <label for="description">Publisher description</label>
                    <textarea class="form-control" rows="4" type="text" name="description" placeholder="Publisher description" autofocus=""></textarea>
                </div>

                <div class="mb-3 mt-3">
                    <label for="publisherUrl">Publisher URL</label>
                    <input class="form-control" type="text" name="publisherUrl" placeholder="Publisher URL" autofocus="">
                </div>
            </div>
            <div id="resource_type_book" class="resource_type_input" style="display: none;">
                <div class="mb-3 mt-3">
                    <label for="book_name">Book name</label>
                    <input class="form-control" type="text" name="book_name" placeholder="Book name" autofocus="">
                </div>

                <div class="mb-3 mt-3">
                    <label for="description">Book description</label>
                    <textarea class="form-control" rows="4" type="text" name="description" placeholder="Book description" autofocus=""></textarea>
                </div>
            </div>
            <button type="submit" class="btn btn-primary mb-3">Submit</button>
        </form>
{% endblock %}