<!DOCTYPE html>
<html lang="en">
<head>
    {% if reward_type == "category" %}
    <title>Create Category</title>
    {% else %}
    <title>Create Reward</title>
    {% endif %}
    <link rel="icon" type="image/x-icon" href="/static/img/favicon.ico">
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <div class="panel">
        <div class="navbar">
            <p></p>
            <img alt="Ownchat Bot logo, whimsical robot" src="/static/img/ownchatbotwide.png">
        </div>
        <h1>Create a {{ reward_type }}</h1>
        <form id="Add reward/category" method="POST">
            <table>
                <tr>
                    <td><label for="name">Name:</label></td>
                    <td>
                        <input id="name" type="text" name="name" required>
                        {% with messages = get_flashed_messages(with_categories=true) %}
                            {% if messages %}
                                {% for category, message in messages %}
                                    {% if category == 'error' %}
                                        <span style="color: orange;">{{ message }}</span>
                                    {% endif %}
                                {% endfor %}
                            {% endif %}
                        {% endwith %}
                    </td>
                </tr>
                <input type="hidden" name="type" value="{{ reward_type }}"><br>
                {% if reward_type != "category" %}
                    {% if reward_type == "goal" %}
                        <tr>
                            <td><label for="target">Target:</label></td>
                            <td><input id="target" type="number" name="target" required></td>
                        </tr>
                    {% else %}
                        <tr>
                            <td><label for="price">Price:</label></td>
                            <td><input id="price" type="number" name="price" required></td>
                        </tr>
                    {% endif %}
                    <tr>
                        <td><label for="info">Description:</label></td>
                        <td><textarea id="info" name="info" rows="1" cols="50" required></textarea></td>
                    </tr>
                    {% if reward_type == "special" %}
                        <tr>
                            <td><label for="cmd">Command:</label></td>
                            <td><input id="cmd" type="text" name="cmd" required></td>
                        </tr>
                    {% endif %}
                    {% if reward_type != "category" %}
                        {% if reward_type == "goal" or reward_type == "vote" %}
                            <input type="hidden" name="cooldown" value="0">
                        {% else %}
                            <tr>
                                <td><label for="cooldown">Cool down:</label></td>
                                <td><input id="cooldown" type="number" name="cooldown" maxlength="2" size="2" value="0" required> minutes until this reward can be redeemed again, after each use.</td>
                            </tr>
                        {% endif %}
                    {% endif %}
                    
                    {% if reward_type == "goal" %}
                        <tr>
                            <td>
                                Milestones:
                            </td>
                            <td>
                                <table>
                                    <tr>
                                        <td>
                                            <label for="milestone1_desc">Reward:</label>
                                        </td>
                                        <td>
                                            <input id="milestone1_desc" type="text" name="milestone1_desc" size="30">
                                        </td>
                                        <td>
                                            <label for="milestone1_points"> at </label>
                                        </td>
                                        <td>
                                            <input id="milestone1_points" type="number" name="milestone1_points" maxlength="4" size="4"> points reached.
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label for="milestone2_desc">Reward:</label>
                                        </td>
                                        <td>
                                            <input id="milestone2_desc" type="text" name="milestone2_desc" size="30">
                                        </td>
                                        <td>
                                            <label for="milestone2_points"> at </label>
                                        </td>
                                        <td>
                                            <input id="milestone2_points" type="number" name="milestone2_points" maxlength="4" size="4"> points reached.
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label for="milestone3_desc">Reward:</label>
                                        </td>
                                        <td>
                                            <input id="milestone3_desc" type="text" name="milestone3_desc" size="30">
                                        </td>
                                        <td>
                                            <label for="milestone3_points"> at </label>
                                        </td>
                                        <td>
                                            <input id="milestone3_points" type="number" name="milestone3_points" maxlength="4" size="4"> points reached.
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    {% endif %}
                    
                    <tr>              
                        <td>Categories</td>
                        <td>Categories in <span style="color: orange;">orange</span> are inactive.
                            <table>
                                {% for cat in all_cats %}
                                <tr>
                                    {% if cat in active_categories %}
                                    <td><label for="category">{{ cat }}:</label></td>
                                    {% else %}
                                    <td><label for="category"><span style="color: orange;">{{ cat }}</span>:</label></td>
                                    {% endif %}
                                    <td><input id="category" type="checkbox" name="category" value="{{ cat }}"></td>
                                </tr>
                                {% endfor %}
                            </table>
                        </td>
                    </tr>
                {% endif %}  
            </table>
            {% if reward_type == "category" %}
                <br>By default, new categories are <span style="color: orange;">inactive</span>.<br>
            {% else %}
                <br>Your {{ reward_type }} will be <span style="color: orange;">inactive</span>, until you add it to an active category.
            {% endif %}
            <br><button id="Add reward/category" class="button button2" type="submit">Create {{ reward_type }}</button><br>
        </form>
	{% if reward_type == "category"%}
        	<a href="{{ url_for('web_panels.mgmt', activeTab='categories') }}">Cancel</a>
        {% else %}
            <a href="{{ url_for('web_panels.mgmt', activeTab='managerewards') }}">Cancel</a>
        {% endif %}
        <br><br>
    </div>
</body>
</html>
