<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>dogcat &mdash; propose</title>
        <link rel="stylesheet"
              href="{{ url_for('static', path='css/propose.css') }}">
    </head>
    <body>
        <div class="wrap">
            <h1>
                <a href="/">dogcat <span>propose</span></a>
            </h1>

            {% if submitted %}
                <div class="msg msg--ok">
                    Proposal submitted: <strong>{{ proposal_id }}</strong> {{ proposal_title }}
                </div>
            {% endif %}

            {% if error %}<div class="msg msg--err">{{ error }}</div>{% endif %}

            <form method="post" action="/" id="propose-form">
                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                <input type="hidden" id="namespace" name="namespace" value="{{ namespace }}">
                <div class="row field">
                    <div class="dropdown" id="ns-dropdown">
                        <div class="dropdown-toggle" id="ns-toggle" tabindex="0" role="button">{{ namespace }}</div>
                        <div class="dropdown-menu" id="ns-menu">
                            {% for ns in namespaces %}
                                <div class="dropdown-item{% if ns == namespace %} active{% endif %}"
                                     data-value="{{ ns }}">{{ ns }}</div>
                            {% endfor %}
                            {% if allow_creating_namespaces %}
                                <div class="dropdown-item dropdown-item--new" data-value="__new__">New&hellip;</div>
                            {% endif %}
                        </div>
                    </div>
                    <input type="text"
                           id="ns-custom"
                           name="ns_custom"
                           class="ns-custom hidden"
                           placeholder="New namespace"
                           autocomplete="off">
                    <input type="text"
                           id="title"
                           name="title"
                           required
                           placeholder="Title"
                           autocomplete="off">
                </div>
                <div class="field">
                    <textarea id="description" name="description" placeholder="Description"></textarea>
                </div>
                <button type="submit" id="submit-btn">Submit proposal</button>
            </form>

        </div>

        <script>
(function(){
  var form=document.getElementById("propose-form");
  var btn=document.getElementById("submit-btn");
  var nsCustom=document.getElementById("ns-custom");
  form.addEventListener("submit",function(){
    if(nsCustom&&!nsCustom.classList.contains("hidden")&&nsCustom.value.trim()){
      document.getElementById("namespace").value=nsCustom.value.trim();
    }
    btn.disabled=true;
    btn.textContent="Submitting\u2026";
  });

  var dd=document.getElementById("ns-dropdown");
  var toggle=document.getElementById("ns-toggle");
  var hidden=document.getElementById("namespace");
  toggle.addEventListener("click",function(){dd.classList.toggle("open")});
  dd.addEventListener("click",function(e){
    var item=e.target.closest(".dropdown-item");
    if(!item)return;
    dd.querySelectorAll(".dropdown-item").forEach(function(i){i.classList.remove("active")});
    item.classList.add("active");
    if(item.dataset.value==="__new__"){
      nsCustom.classList.remove("hidden");
      nsCustom.focus();
      toggle.textContent="New\u2026";
    }else{
      nsCustom.classList.add("hidden");
      nsCustom.value="";
      hidden.value=item.dataset.value;
      toggle.textContent=item.dataset.value;
    }
    dd.classList.remove("open");
  });
  document.addEventListener("click",function(e){
    if(!dd.contains(e.target))dd.classList.remove("open");
  });
})();
        </script>
    </body>
</html>
