{% extends 'site_layout.html.j2' %}
{% set title="Dashboard" %}

{% block content %}
<h1>User Dashboard</h1>
<p class="flow-text">Select a server to configure Titan Embeds.</p>
<p>*List missing some servers? It's because you must have either <strong>Manage Server</strong>, <strong>Kick Members</strong>, or <strong>Ban Members</strong> permissions to modify embed settings.</p>
<div class="row">
  {% for server in servers %}
  <div class="col l4 m6 s12">
    <div class="card-panel indigo lighten-5 z-depth-3 hoverable">
      <div class="row valign-wrapper">
        <div class="col s3">
          {% if server.icon %}
          <img src="{{ icon_generate(server.id, server.icon) }}" alt="" class="circle responsive-img">
          {% else %}
          <span class="black-text">No icon :(</span>
          {% endif %}
        </div>
        <div class="col s7">
          <span class="black-text">
            <p class="flow-text truncate">{{ server.name }}</p>
            <br>
            <a class="waves-effect waves-light btn" href="{{url_for('user.administrate_guild', guild_id=server['id'])}}">Modify</a>
          </span>
        </div>
      </div>
    </div>
  </div>
  {% endfor %}
</div>

<hr>

{% if cosmetics is none %}
<div class="row">
  <div class="col s12">
    <div class="card-panel indigo lighten-5 z-depth-3 hoverable black-text">
      <h4>Cosmetics!</h4>
      <p class="flow-text">Would you like to have <strong>cosmetics</strong> such as <em>custom CSS</em> for your embed?</p>
      <a class="waves-effect waves-light btn" href="https://discord.io/Titan">Talk to us!</a>
    </div>
  </div>
</div>
{% endif %}

{% if css_list is not none %}
<p class="flow-text">
  Create or modify your custom CSS.
  <a class="waves-effect waves-light btn" href="{{ url_for("user.new_custom_css_get") }}">New</a>
</p>
<div class="row">
  {% for css in css_list %}
  <div class="col l4 m6 s12">
    <div class="card-panel indigo lighten-5 z-depth-3 hoverable black-text">
      <p class="flow-text truncate"><code>#{{ css.id }}</code> {{ css.name }}</p>
      <a class="waves-effect waves-light btn" href="{{ url_for("user.edit_custom_css_get", css_id=css.id) }}">Modify</a>
    </div>
  </div>
  {% endfor %}
</div>
{% endif %}

<hr>

<div class="row">
  <div class="col s12">
    <div class="card-panel indigo lighten-5 z-depth-3 hoverable black-text">
      <h4>Donations!</h4>
      <p class="flow-text">Would you like to support the Titan Embeds project?</p>
      <!--<p>You currently have <strong>{{ session["tokens"] }}</strong> Titan Tokens.</p>
      <a class="waves-effect waves-light btn" href="{{ url_for('user.donate_get') }}">Donate!!</a>-->
      <a class="waves-effect waves-light btn" href="https://patreon.com/TitanEmbeds" target="_blank">Donate!!</a>
    </div>
  </div>
</div>
{% endblock %}