{% extends "base.html" %}
{% block main %}
<div class="mt-5 text-center">
    <h2 class="text-2xl font-bold text-gray-900">
        Add an application to the wishlist
    </h2>
</div>


<div class="overflow-x-auto max-w-md mx-auto pt-5">

    {% if successmsg %}
    <div role="alert" class="rounded-md border-s-4 border-green-500 bg-green-50 p-4 my-5">
      <p class="mt-2 text-sm text-green-700 font-bold">
        <i class="fa fa-thumbs-up fa-fw" aria-hidden="true"></i>
        {{ successmsg }}
      </p>
    </div>
    {% else %}


    {% if not user %}
    <div role="alert" class="rounded-md border-s-4 border-orange-500 bg-orange-50 p-4 mb-5">
      <p class="mt-2 text-sm text-orange-700 font-bold">
        <i class="fa fa-exclamation-triangle fa-fw" aria-hidden="true"></i>
        You must first login to be allowed to submit an app to the wishlist
      </p>
    </div>
    {% endif %}

    <div role="alert" class="rounded-md border-s-4 border-sky-500 bg-sky-50 p-4">
      <p class="mt-2 text-sm text-sky-700 font-bold">
        <i class="fa fa-info-circle fa-fw" aria-hidden="true"></i>
        Please check the license of the app your are proposing
      </p>
      <p class="mt-2 text-sm text-sky-700">
        The YunoHost project will only package free/open-source software (with possible case-by-case exceptions for apps which are not-totally-free)
      </p>
    </div>

    {% if errormsg %}
    <div role="alert" class="rounded-md border-s-4 border-red-500 bg-red-50 p-4 my-5">
      <p class="mt-2 text-sm text-red-700 font-bold">
        <i class="fa fa-exclamation-triangle fa-fw" aria-hidden="true"></i>
        {{ errormsg }}
      </p>
    </div>
    {% endif %}


    <form method="POST" action="{{ url_for('add_to_wishlist') }}" class="mt-8 mb-8" >
      
      <label for="name" class="mt-5 block font-bold text-gray-700">Name</label>
      <input name="name" type="text" class="w-full mt-1 rounded-md border-gray-200 text-gray-700 shadow-sm" maxlength="30" required onkeyup="this.value = this.value.replace(/[^a-zA-Z0-9.-\\(\\)\\ ]/, '')" />
      
      <label for="description" class="mt-5 block font-bold text-gray-700">Description</label>
      <textarea name="description" type="text" class="w-full mt-1 rounded-md border-gray-200 text-gray-700 shadow-sm" required rows='3' maxlength='100'></textarea>
      <span class="text-xs text-gray-600"><span class="font-bold">Please be concise and focus on what the app does.</span> No need to repeat "[App] is ...". No need to state that it is free/open-source or self-hosted (otherwise it wouldn't be packaged for YunoHost). Avoid marketing stuff like 'the most', or vague properties like 'easy', 'simple', 'lightweight'.</span>

      <label for="upstream" class="mt-5 block font-bold text-gray-700">Project code repository</label>
      <input name="upstream" type="url" class="w-full mt-1 rounded-md border-gray-200 text-gray-700 shadow-sm"  maxlength="150" required />
      
      <label for="website" class="mt-5 block font-bold text-gray-700">Project website</label>
      <input name="website" type="url" class="w-full mt-1 rounded-md border-gray-200 text-gray-700 shadow-sm"  maxlength="150" />
      <span class="text-xs text-gray-600">Please <emph>do not</emph> just copy-paste the code repository URL. If the project has no proper website, then leave the field empty.</span>
    
      <button
        type="submit"
        class="block mx-auto btn btn-primary mt-5 {% if user %}hover:bg-blue-700{% endif %}"
        {% if not user %}disabled{% endif %}
      >
        Submit
      </button>

    </form>
    {% endif %}
</div>

{% endblock %}