{% extends 'site_layout.html.j2' %}
{% if new %}
    {% set title="New - User CSS" %}
{% else %}
    {% set title="Editing " + css.name + " - User CSS" %}
{% endif %}

{% block content %}
<h1>{% if new %}New{% else %}Editing {{ css.name }}{% endif %} - User Defined CSS</h1>
<p><strong>Note:</strong> This feature is only used for CSS. Any attempts to enter HTML or malicious CSS code
will have CSS cosmetic privilages removed, if caught. Please don't, we check the databases often. Thanks!</p>

{% if not new %}
<div class="card-panel indigo lighten-5 z-depth-3 hoverable black-text">
  <div class="row">
    <div class="col s12">
        <p class="flow-text">Using your custom CSS</p>
        <p><strong>This user defined CSS has a unique ID of <em style="font-size: 130%;">{{ css.id }}</em>.</strong></p>
        <p>To use this CSS in the embed, you must apped a <code>?css={{ css.id }}</code> to the embed URL.</p>
        <p>Something like this will work:</p>
        <input readonly value="https://titanembeds.com/embed/1234567890987654321?css={{ css.id }}" id="disabled" type="text" onClick="this.setSelectionRange(this.value.indexOf(&quot;?&quot;), this.value.length)">
    </div>
  </div>
</div>
{% endif %}

<div class="card-panel indigo lighten-5 z-depth-3 hoverable black-text">
  <div class="row">
    <div class="col s12">
        <p class="flow-text">Give your CSS a name</p>
        <input placeholder="Some Lit CSS" id="css_name" type="text" {% if not new %}value="{{ css.name }}"{% endif %}>
        <label for="css_name">Name</label>
    </div>
    <div class="col s12">
        <p class="flow-text">Propose Predefined CSS variables here</p>
        <p>
          <input type="checkbox" id="toggleCSSVar" {% if not new and css.css_var_bool %}checked{% endif %}/>
          <label for="toggleCSSVar">CSS Variables Enabled</label>
        </p>
        <div class="row">
            <div class="col m6 s12">
                <span>Modal Background Color (<code>--modal</code>):<span>
                <input id="css_var_modal" class="jscolor {hash:true}" value="{% if new or variables is none %}#546e7a{% else %}{{ variables.modal|e }}{% endif %}">
            </div>
            <div class="col m6 s12">
                <span>Uncategorized Discord Users (<code>--noroleusers</code>):<span>
                <input id="css_var_noroleusers" class="jscolor {hash:true}" value="{% if new or variables is none %}#eceff1{% else %}{{ variables.noroleusers|e }}{% endif %}">
            </div>
            <div class="col m6 s12">
                <span>Main Background Color (<code>--main</code>):<span>
                <input id="css_var_main" class="jscolor {hash:true}" value="{% if new or variables is none %}#455a64{% else %}{{ variables.main|e }}{% endif %}">
            </div>
            <div class="col m6 s12">
                <span>Text input placeholder (<code>--placeholder</code>):<span>
                <input id="css_var_placeholder" class="jscolor {hash:true}" value="{% if new or variables is none %}#636363{% else %}{{ variables.placeholder|e }}{% endif %}">
            </div>
            <div class="col m6 s12">
                <span>Sidebar Dividers (<code>--sidebardivider</code>):<span>
                <input id="css_var_sidebardivider" class="jscolor {hash:true}" value="{% if new or variables is none %}#90a4ae{% else %}{{ variables.sidebardivider|e }}{% endif %}">
            </div>
            <div class="col m6 s12">
                <span>Left Sidebar/Guild Navigation Background (<code>--leftsidebar</code>):<span>
                <input id="css_var_leftsidebar" class="jscolor {hash:true}" value="{% if new or variables is none %}#607d8b{% else %}{{ variables.leftsidebar|e }}{% endif %}">
            </div>
            <div class="col m6 s12">
                <span>Right Sidebar/Member List Background (<code>--rightsidebar</code>):<span>
                <input id="css_var_rightsidebar" class="jscolor {hash:true}" value="{% if new or variables is none %}#607d8b{% else %}{{ variables.rightsidebar|e }}{% endif %}">
            </div>
            <div class="col m6 s12">
                <span>Header Background (<code>--header</code>):<span>
                <input id="css_var_header" class="jscolor {hash:true}" value="{% if new or variables is none %}#263238{% else %}{{ variables.header|e }}{% endif %}">
            </div>
            <div class="col m6 s12">
                <span>Chat Message (<code>--chatmessage</code>):<span>
                <input id="css_var_chatmessage" class="jscolor {hash:true}" value="{% if new or variables is none %}#c3c4c5{% else %}{{ variables.chatmessage|e }}{% endif %}">
            </div>
            <div class="col m6 s12">
                <span>Discriminator Text (<code>--discrim</code>):<span>
                <input id="css_var_discrim" class="jscolor {hash:true}" value="{% if new or variables is none %}#FFFFFF{% else %}{{ variables.discrim|e }}{% endif %}">
            </div>
            <div class="col m6 s12">
                <span>Message Box Background (<code>--chatbox</code>):<span>
                <input id="css_var_chatbox" class="jscolor {hash:true}" value="{% if new or variables is none %}#37474f{% else %}{{ variables.chatbox|e }}{% endif %}">
            </div>
        </div>
        <p><strong>TIP!</strong> You can use the variables in your CSS below! Something like <code>color: var(--leftsidebar);</code> would work!</p>
    </div>
    {% if (new and premium_css_count >= cosmetics.css_limit) or (not new and premium_css_count >= cosmetics.css_limit and css.css is none) %}
    <div class="col s12">
        <hr>
        <p class="flow-text">All custom CSS slots are used. Donate to get more!</p>
        <p>Free up some slots by emptying your other custom CSS field and submitting it (Titan will automatically mark empty custom css editor fields as unused slots in the database) or delete the user defined css slot altogether.</p>
        <hr>
    </div>
    {% else %}
    <div class="col s12">
        <p class="flow-text">Edit your CSS code here</p>
        <p><em>Remove any text and leave this box blank when submitting to not use up your custom css slots.</em></p>
        <div style="position: relative; height: 40vh;">
            <div id="css_editor">{% if new %}/* Enter your CSS code here! */{% else %}{% if css.css %}{{ css.css|e }}{% endif %}{% endif %}</div>
        </div>
        <br>
    </div>
    {% endif %}
    <div class="col s12">
        <a id="submit-btn" class="waves-effect waves-light btn">Submit</a>
        {% if not new %}<a id="delete-btn" class="waves-effect waves-light btn red">Delete</a>{% endif %}
    </div>
  </div>
</div>

{% endblock %}

{% block script %}
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" integrity="sha256-xrr4HH5eSY+cFz4SH7ja/LaAi9qcEdjMpeMP49/iOLs=" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js" integrity="sha256-y1h79SSb3icyBC/BrLCzoexQZAOGwlvoAr85biY4QGw=" crossorigin="anonymous"></script>
<script>
    const newCSS = {% if new %}true{% else %}false{% endif %};
</script>
<script type="text/javascript" src="{{ url_for('static', filename='js/usercss.js') }}"></script>
{% endblock %}


{% block additional_head_elements %}
<style>
    #css_editor { 
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
</style>
{% endblock %}