{% extends 'base.html' %}

{% block content %}
<h1>{% block title %} Add a New Tool, Example, or Practice {% 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="example">Example</option>
                  <option value="practice">Practice</option>
              </select>
            </div>
            <div id="resource_type_tool" class="resource_type_input" style="display: none;">
                <div class="mb-3 mt-3">
                    <label for="name">Tool name</label>
                    <input class="form-control" type="text" name="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="project_url">Project URL</label>
                    <input class="form-control" type="text" name="project_url" placeholder="Project URL" autofocus="">
                </div>

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

                <div class="mb-3 mt-3">
                    <label for="platform_status">Stand-alone or platform?</label>
                    <input class="form-control" type="text" name="platform_status" placeholder="Stand-alone or platform?" autofocus="">
                </div>

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

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

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

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

                <div class="mb-3 mt-3">
                    <label for="saas">SAAS?</label>
                    <input class="form-control" type="text" name="saas" placeholder="SAAS?" 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>
            <div id="resource_type_example" class="resource_type_input" style="display: none;">
                <div class="mb-3 mt-3">
                    <label for="name">Example name</label>
                    <input class="form-control" type="text" name="name" placeholder="Example name" autofocus="">
                </div>

                <div class="mb-3 mt-3">
                    <label for="description">Example description</label>
                    <textarea class="form-control" rows="4" type="text" name="description" placeholder="Example description" autofocus=""></textarea>
                </div>
            </div>
            <div id="resource_type_practice" class="resource_type_input" style="display: none;">
                <div class="mb-3 mt-3">
                    <label for="name">Practice name</label>
                    <input class="form-control" type="text" name="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>

            <button type="submit" class="btn btn-primary mb-3">Submit</button>
        </form>
{% endblock %}