{% extends 'layout.html' %}
{% set avatar = g.user.avatar() %}
{% block title -%} Dashboard {%- endblock %}

{% macro name_of(monster) %}
<a href="{{ monster['url'] }}">{{ monster['id'] }}</a>
{% endmacro %}

{% block meta %}
{% endblock %}

{% block style %}
<style>
    .move, .move-bar, .in-progress, .avatar-status, .rank {
        margin-bottom: 20px;
        width:100%;
    }

    .avatar-profile-image {
        width: 16px;
        height: 16px;
        border-radius: 100%;
        margin-right: 6px;
        margin-top: -2px;
    }

    .avatar-status  {
        width: 100%;
    }

    .avatar-status ul {
        padding-left: 20px;
    }

    .avatar-status li {
        list-style: none;
    }

    .move-bar .mdl-tabs__panel {
        margin-top: 20px;
    }

    #hack-and-slash-panel, #combine-panel {
        margin-top: 0px;
    }

    .move.sleep > .mdl-card__title {
        color: #fff;
        height: 176px;
        background: #5a6f91;
    }

    .status-button {
        text-decoration: none;
        border-bottom: 0;
    }

    .status-button, .level-up-button {
        cursor: pointer;
    }

    #tlkio {
      width: 400px;
      height: 70px;
      background-color: white;
      position: absolute;
      right:0; bottom: 0px;
      z-index: 9999;
      -webkit-transition: height 0.2s;
      box-shadow: 2px 2px 2px 2px #ddd;
    }

    #tlkio:hover {
      right:0; bottom: 0px;
      height: 100%;
    }

    .mdl-card__supporting-text {
      width: auto;
    }

    @-webkit-keyframes yellow-fade {
       0% {background: #ffe066;}
       100% {background: white;}
    }

    @keyframes yellow-fade {
       0% {background: #ffe066;}
       100% {background: white;}
    }

    .highlight {
       -webkit-animation: yellow-fade 0.6s ease-in 1;
       animation: yellow-fade 0.6s ease-in 1;
    }

    @media screen and (max-width: 480px) {
      #tlkio {
        display: none;
      }
    }

    .telegram-button {
      position: fixed;
      right: 30px;
      bottom: 30px;
      z-index: 1;
    }

    .telegram-button svg {
      fill: white;
      position: relative;
      top: -2px;
      left: -2px;
    }

    .rank .me td {
      font-weight: bold;
    }
</style>
{% endblock %}
{% block body %}
<div class="mdl-layout mdl-js-layout">
    <!-- Always shows a header, even in smaller screens. -->
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
      <header class="mdl-layout__header">
        <div class="mdl-layout__header-row">
          <!-- Title -->
          <span class="mdl-layout-title">Nekøyume</span>
          <!-- Add spacer, to align navigation to the right -->
          <div class="mdl-layout-spacer"></div>
          <!-- Navigation. We hide it in small screens. -->
          <nav class="mdl-navigation mdl-layout--large-screen-only">
            <span><strong>{% trans -%}Address{%- endtrans %}:&nbsp;</strong> {{ g.user.address }}</span>
          </nav>
        </div>
      </header>
      <div id="avatar-status" class="mdl-layout__drawer">
        <!-- Title -->
        <span class="mdl-layout-title">Nekøyume</span>
        <!-- Add spacer, to align navigation to the right -->
        <div class="mdl-layout-spacer"></div>
        <!-- Navigation. We hide it in small screens. -->
        <nav class="mdl-navigation mdl-layout--large-screen-only">
          <a class="mdl-navigation__link" href="https://nekoyu.me/">{% trans -%}Homepage{%- endtrans %}</a>
          <a class="mdl-navigation__link" href="{% trans -%}https://www.dungeonworldsrd.com/{%- endtrans %}">{% trans -%}Learn Dungeon World{%- endtrans %}</a>
          <a class="mdl-navigation__link" href="https://nekoyu.me/token">{% trans -%}Buy Gold{%- endtrans %}</a>
          <a class="mdl-navigation__link" href="https://github.com/nekoyume">Github</a>
          <a class="mdl-navigation__link" href="{{ url_for('game.get_logout') }}">{% trans -%}Logout{%- endtrans %}</a>
        </nav>
      </div>
      <main class="mdl-layout__content">
          <div class="mdl-grid">
            <div class="mdl-cell mdl-cell--1-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
            <div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-phone">
              <div class="avatar-status-section">
                <table class="mdl-data-table mdl-js-data-table avatar-status mdl-shadow--2dp">
                  <thead>
                    <tr>
                      <th class="mdl-data-table__cell--non-numeric">Status</th>
                      <th>Data</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td class="mdl-data-table__cell--non-numeric">Name</td>
                      <td>
                      <img src="{{ avatar.profile_image_url }}" alt="{{ avatar.name }} profile image" class="avatar-profile-image"> {{ avatar.name }}
                      </td>
                    </tr>
                    <tr>
                      <td class="mdl-data-table__cell--non-numeric">LV</td>
                      <td>
                      {{ avatar.lv }}
                      </td>
                    </tr>
                    <tr>
                      <td class="mdl-data-table__cell--non-numeric">HP</td>
                      <td>
                      {{ avatar.hp }} / {{ avatar.max_hp }}
                      </td>
                    </tr>
                    <tr>
                      <td class="mdl-data-table__cell--non-numeric">XP</td>
                      <td>
                      {{ avatar.xp }} / {{ avatar.lv + 7 }}
                      </td>
                    </tr>
                    <tr>
                      <td class="mdl-data-table__cell--non-numeric">STR</td>
                      <td>
                      {{ avatar.strength }}
                      {% if avatar.modifier('strength') != 0 %}
                        (<strong id="strength-modifier">{{ avatar.modifier('strength')}}</strong>)
                        <div class="mdl-tooltip" data-mdl-for="strength-modifier">
                          {% trans stat='+STR'%}Modifier when roll {{ stat }}.{%- endtrans %}
                        </div>
                      {% endif %}
                      {% if not unconfirmed_move and avatar.xp >= avatar.lv + 7 %}
                          <span class="level-up-button" onclick="levelUp('strength')">🔼</span>
                      {% endif %}
                      </td>
                    </tr>
                    <tr>
                      <td class="mdl-data-table__cell--non-numeric">DEX</td>
                      <td>
                      {{ avatar.dexterity }}
                      {% if avatar.modifier('dexterity') != 0 %}
                        (<strong id="dexterity-modifier">{{ avatar.modifier('dexterity')}}</strong>)
                        <div class="mdl-tooltip" data-mdl-for="dexterity-modifier">
                          {% trans stat='+DEX'%}Modifier when roll {{ stat }}.{%- endtrans %}
                        </div>
                      {% endif %}
                      {% if not unconfirmed_move and avatar.xp >= avatar.lv + 7 %}
                          <span class="level-up-button" onclick="levelUp('dexterity')">🔼</span>
                      {% endif %}
                      </td>
                    </tr>
                    <tr>
                      <td class="mdl-data-table__cell--non-numeric">CON</td>
                      <td>
                      {{ avatar.constitution }}
                      {% if avatar.modifier('constitution') != 0 %}
                        (<strong id="constitution-modifier">{{ avatar.modifier('constitution')}}</strong>)
                        <div class="mdl-tooltip" data-mdl-for="constitution-modifier">
                          {% trans stat='+CON'%}Modifier when roll {{ stat }}.{%- endtrans %}
                        </div>
                      {% endif %}
                      {% if not unconfirmed_move and avatar.xp >= avatar.lv + 7 %}
                          <span class="level-up-button" onclick="levelUp('constitution')">🔼</span>
                      {% endif %}
                      </td>
                    </tr>
                    <tr>
                      <td class="mdl-data-table__cell--non-numeric">INT</td>
                      <td>
                      {{ avatar.intelligence }}
                      {% if avatar.modifier('intelligence') != 0 %}
                        (<strong id="intelligence-modifier">{{ avatar.modifier('intelligence')}}</strong>)
                        <div class="mdl-tooltip" data-mdl-for="intelligence-modifier">
                          {% trans stat='+INT'%}Modifier when roll {{ stat }}.{%- endtrans %}
                        </div>
                      {% endif %}
                      {% if not unconfirmed_move and avatar.xp >= avatar.lv + 7 %}
                          <span class="level-up-button" onclick="levelUp('intelligence')">🔼</span>
                      {% endif %}
                      </td>
                    </tr>
                    <tr>
                      <td class="mdl-data-table__cell--non-numeric">WIS</td>
                      <td>
                      {{ avatar.wisdom }}
                      {% if avatar.modifier('wisdom') != 0 %}
                        (<strong id="wisdom-modifier">{{ avatar.modifier('wisdom')}}</strong>)
                        <div class="mdl-tooltip" data-mdl-for="wisdom-modifier">
                          {% trans stat='+WIS'%}Modifier when roll {{ stat }}.{%- endtrans %}
                        </div>
                      {% endif %}
                      {% if not unconfirmed_move and avatar.xp >= avatar.lv + 7 %}
                          <span class="level-up-button" onclick="levelUp('wisdom')">🔼</span>
                      {% endif %}
                      </td>
                    </tr>
                    <tr>
                      <td class="mdl-data-table__cell--non-numeric">CHA</td>
                      <td>
                      {{ avatar.charisma }}
                      {% if avatar.modifier('charisma') != 0 %}
                        (<strong id="charisma-modifier">{{ avatar.modifier('charisma')}}</strong>)
                        <div class="mdl-tooltip" data-mdl-for="charisma-modifier">
                          {% trans stat='+CHA'%}Modifier when roll {{ stat }}.{%- endtrans %}
                        </div>
                      {% endif %}
                      {% if not unconfirmed_move and avatar.xp >= avatar.lv + 7 %}
                          <span class="level-up-button" onclick="levelUp('charisma')">🔼</span>
                      {% endif %}
                      </td>
                    </tr>
                  </tbody>
                </table>

                <table class="mdl-data-table mdl-js-data-table avatar-status mdl-shadow--2dp">
                  <thead>
                    <tr>
                      <th class="mdl-data-table__cell--non-numeric">Item</th>
                      <th>Amount</th>
                    </tr>
                  </thead>
                  <tbody>
                  {% for name, amount in avatar.items.items() %}
                    <tr>
                      <td class="mdl-data-table__cell--non-numeric">{{ name }}</td>
                      <td>{{ amount }}</td>
                    </tr>
                  {% endfor %}
                  </tbody>
                </table>

                <table class="mdl-data-table mdl-js-data-table rank mdl-shadow--2dp">
                  <thead>
                    <tr>
                      <th class="mdl-data-table__cell--non-numeric">Address</th>
                      <th>Level</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for name, level in rank %}
                    <tr{% if avatar.user == name %} class="me" {% endif %}>
                      <td class="mdl-data-table__cell--non-numeric">
                        {{ name|truncate(18) }}
                      </td>
                      <td>{{ level + 1 }}</td>
                    </tr>
                    {% endfor %}
                  </tbody>
                </table>
              </div>
            </div>
            <form method="POST" class="level-up-form"
                                action="{{ url_for('game.post_move') }}"
                                style="display: none">
              <input type="hidden" name="name" value="level_up">
              <input type="hidden" name="new_status">
            </form>
            <div class="mdl-cell mdl-cell--7-col mdl-cell--5-col-tablet">
              <section class="move-bar mdl-card mdl-shadow--2dp"">
                  <div class="move-bar-normal mdl-tabs mdl-js-tabs mdl-js-ripple-effect
                              {% if unconfirmed_move %} hidden {% endif %}">
                    <div class="mdl-tabs__tab-bar">
                        <a href="#hack-and-slash-panel" class="mdl-tabs__tab is-active">⚔️ {% trans -%} Hack &amp; Slash {%- endtrans %}</a>
                        <a href="#sleep-panel" class="mdl-tabs__tab">💤 {% trans -%} Sleep {%- endtrans %}</a>
                        <a href="#say-panel" class="mdl-tabs__tab">🗣 {% trans -%} Say {%- endtrans %}</a>
                        <a href="#send-panel" class="mdl-tabs__tab">➡️ {% trans -%} Send {%- endtrans %}</a>
                        <a href="#combine-panel" class="mdl-tabs__tab">🙌 {% trans -%} combine {%- endtrans %}</a>
                    </div>

                    <div class="mdl-tabs__panel is-active" id="hack-and-slash-panel">
                        <div class="mdl-card__supporting-text" style="width: auto;">
                            <center>{% trans -%}Encounter a nearby monster and battle it.{%- endtrans %}</center>
                        </div>
                        <div class="mdl-card__actions">
                            <form method="POST" action="{{ url_for('game.post_move') }}">
                                <input type="hidden" name="name" value="hack_and_slash">
                                <center>
                                  <p>
                                    <select name="weapon">
                                      <option value="">{{ _('Weapon') }}</option>
                                      {% for weapon in avatar.weapons %}
                                        <option value="{{ weapon.ticker_name }}"
                                        {% if avatar.last_weapon and
                                              avatar.last_weapon == weapon.ticker_name -%}
                                              selected
                                        {%- endif %}>{{ weapon.__name__ }}</option>
                                      {% endfor %}
                                    </select>
                                    <select name="armor">
                                      <option value="">{{ _('Armor') }}</option>
                                      {% for armor in avatar.armors %}
                                        <option value="{{ armor.ticker_name }}"
                                        {% if avatar.last_armor and
                                              avatar.last_armor == armor.ticker_name -%}
                                              selected
                                        {%- endif %}>{{ armor.__name__ }}</option>
                                      {% endfor %}
                                    </select>
                                    <select name="food">
                                      <option value="">{{ _('Food') }}</option>
                                      {% for food in avatar.foods %}
                                        <option value="{{ food.ticker_name }}">{{ food.__name__ }}</option>
                                      {% endfor %}
                                    </select>
                                  </p>
                                  <input type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" value="{% trans -%}Find monster{%- endtrans %}">

                                </center>
                            </form>
                        </div>
                    </div>
                    <div class="mdl-tabs__panel" id="sleep-panel">
                        <div class="mdl-card__supporting-text" style="width: auto;">
                            <center>{% trans -%}Take your sleep and regain your HP.{%- endtrans %}</center>
                        </div>
                        <div class="mdl-card__actions">
                            <form method="POST" action="{{ url_for('game.post_move') }}">
                                <input type="hidden" name="name" value="sleep">
                                <center><input type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" value="{% trans -%}Lay down on the bed{%- endtrans %}"></center>
                            </form>
                        </div>
                    </div>
                    <div class="mdl-tabs__panel" id="say-panel">
                        <div class="mdl-card__actions">
                            <form method="POST" action="{{ url_for('game.post_move') }}" style="text-align: center">
                                <input type="hidden" name="name" value="say">
                                <div class="mdl-textfield mdl-js-textfield">
                                  <input class="mdl-textfield__input" type="text" id="content" name="content">
                                  <label class="mdl-textfield__label" for="content">{% trans -%}Say something.{%- endtrans %}</label>
                                </div>
                                <input type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" value="{% trans -%}OK{%- endtrans %}">
                            </form>
                        </div>
                    </div>
                    <div class="mdl-tabs__panel" id="send-panel">
                        <div class="mdl-card__actions">
                            <form method="POST" action="{{ url_for('game.post_move') }}" style="text-align: center">
                                <input type="hidden" name="name" value="send">
                                <select name="item">
                                  {% for k, v in avatar.items.items() %}
                                  <option value="{{ k }}">{{ k }}</option>
                                  {% endfor %}
                                </select>
                                <div class="mdl-textfield mdl-js-textfield" style="width: 80px">
                                  <input class="mdl-textfield__input" type="number" id="amount" name="amount">
                                  <label class="mdl-textfield__label" for="amount">{% trans -%}Amount{%- endtrans %}</label>
                                </div>
                                <div class="mdl-textfield mdl-js-textfield">
                                  <input class="mdl-textfield__input" type="text" id="receiver" name="receiver">
                                  <label class="mdl-textfield__label" for="receiver">{% trans -%}Address to send{%- endtrans %}</label>
                                </div>
                                <input type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" value="{% trans -%}OK{%- endtrans %}">
                            </form>
                        </div>
                    </div>
                    <div class="mdl-tabs__panel" id="combine-panel">
                        <div class="mdl-card__supporting-text" style="width: auto;">
                            <center>{% trans -%}Combine three items to get a new item. (needs 1 GOLD){%- endtrans %}</center>
                        </div>
                        <div class="mdl-card__actions">
                            <form method="POST" action="{{ url_for('game.post_move') }}" style="text-align: center">
                                <input type="hidden" name="name" value="combine">
                                <p>
                                  <select name="item1">
                                    <option value="----">----</option>
                                    {% for k, v in avatar.items.items() %}
                                      {% if v > 0 %}
                                        <option value="{{ k }}">{{ k }}</option>
                                      {% endif %}
                                    {% endfor %}
                                  </select>
                                  <select name="item2">
                                    <option value="----">----</option>
                                    {% for k, v in avatar.items.items() %}
                                      {% if v > 0 %}
                                        <option value="{{ k }}">{{ k }}</option>
                                      {% endif %}                                  {% endfor %}
                                  </select>
                                  <select name="item3">
                                    <option value="----">----</option>
                                    {% for k, v in avatar.items.items() %}
                                      {% if v > 0 %}
                                        <option value="{{ k }}">{{ k }}</option>
                                      {% endif %}
                                    {% endfor %}
                                  </select>
                                </p>
                                <input type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" value="{% trans -%}OK{%- endtrans %}">
                            </form>
                        </div>
                    </div>
                  </div>
                  <div class="move-bar move-bar-waiting mdl-card in-progress
                              {% if not unconfirmed_move %} hidden {% endif %}">
                    <div id="p2" class="mdl-progress mdl-js-progress mdl-progress__indeterminate" style="width:100%"></div>
                    <div class="mdl-card__title mdl-card--expand" style="width: auto;">
                    <h2 class="mdl-card__title-text">{% trans -%}Currently in progress ...{%- endtrans %}</h2>
                    {% if unconfirmed_move %}
                    <input type="hidden" name="unconfirmed-move-id" value="{{ unconfirmed_move.id }}">
                    {% endif %}
                    </div>
                  </div>
              </section>
              <div class="moves">
                <script> var last_block = {{ feed[0].block_id }}; </script>
                {% for move in feed.limit(10) %}
                <div class="move-{{ move.id }}">
                    {% set move_avatar, result = move.execute() %}
                    {% if result.type == 'create_novice' %}
                    <div class="move mdl-card mdl-shadow--2dp
                                {% if 'last_block' in request.values and move.block_id > request.values.get('last_block')|int %}highlight{% endif %}">
                        <div class="mdl-card__supporting-text">
                          <sub><img src="{{ move_avatar.profile_image_url }}" alt="{{ avatar.name }} profile image" class="avatar-profile-image"> <b>{{ move_avatar.name }}</b> ∙ {{ move.created_at }}</sub>
                          <hr>
                        </div>
                        <div class="mdl-card__title mdl-card--expand">
                            <h2 class="mdl-card__title-text">
                          👶 {% trans -%}Novice was born!{%- endtrans %}</h2>
                        </div>
                        <div class="mdl-card__supporting-text">
                            <h5>{% trans -%}Welcome!{%- endtrans %}</h5>
                            {% include 'basic_info.html' %}
                        </div>
                    </div>
                    {% elif result.type == 'hack_and_slash' %}
                    <div class="move mdl-card mdl-shadow--2dp
                                {% if 'last_block' in request.values and move.block_id > request.values.get('last_block')|int %}highlight{% endif %}">
                        <div class="mdl-card__supporting-text">
                          <sub><img src="{{ move_avatar.profile_image_url }}" alt="{{ avatar.name }} profile image" class="avatar-profile-image"> <b>{{ move_avatar.name }}</b> ∙ {{ move.created_at }}</sub>
                          <hr>
                        </div>
                        {% if result.result == 'win' %}
                        <div class="mdl-card__title mdl-card--expand">
                            <h2 class="mdl-card__title-text">👍 {% trans -%}You won the battle!{%- endtrans %}</h2>
                        </div>
                        {% elif result.result == 'finish' %}
                        <div class="mdl-card__title mdl-card--expand">
                            <h2 class="mdl-card__title-text">😐 {% trans -%}Battle was finished.{%- endtrans %}</h2>
                        </div>
                        {% else %}
                        <div class="mdl-card__title mdl-card--expand">
                            <h2 class="mdl-card__title-text">😭 {% trans -%}You lost the battle. {%- endtrans %}</h2>
                        </div>
                        {% endif %}
                        <div class="mdl-card__supporting-text">
                            <ol>
                                {% for status in result.battle_status %}
                                {% if status['type'] == 'attack_monster' %}
                                <li>
                                  💥
                                  {% trans monster=name_of(status['monster']),
                                           damage=status['damage'],
                                           monster_hp=status['monster']['hp'],
                                           monster_hp_after_damage = status['monster']['hp'] - status['damage'] -%}
                                  You attacked {{ monster }} and wounded it for <strong>{{ damage }}</strong> damage. <small>(HP {{ monster_hp }} → {{ monster_hp_after_damage }})</small>
                                  {%- endtrans %}
                                </li>
                                {% elif status['type'] == 'attacked_by_monster' %}
                                <li>
                                  😫
                                  {% trans monster=name_of(status['monster']),
                                           damage=status['damage'] -%}
                                  You are attacked by {{ monster }} and take <strong>{{ damage }}</strong> damage.
                                  {%- endtrans %}
                                </li>
                                {% elif status['type'] == 'get_xp' %}
                                <li>
                                  🤔
                                  {% trans -%}
                                  You learned from your previous mistake. <small>(XP +1)</small>
                                  {%- endtrans %}
                                </li>
                                {% elif status['type'] == 'kill_monster' %}
                                <li>
                                  ☠️
                                  {% trans monster=name_of(status['monster']) -%}
                                  You defeated {{ monster }}!
                                  {%- endtrans %}
                                </li>
                                {% elif status['type'] == 'killed_by_monster' %}
                                <li>
                                  ☠️
                                  {% trans monster=name_of(status['monster']) -%}
                                  You are defeated by {{ monster }}...
                                  {%- endtrans %}
                                </li>
                                {% elif status['type'] == 'run' %}
                                <li>
                                  🏃
                                  {% trans monster=name_of(status['monster']) -%}
                                  {{ monster }} has run away...
                                  {%- endtrans %}
                                </li>
                                {% elif status['type'] == 'get_item' %}
                                <li>
                                  🎁
                                  {% trans item=status['item'] -%}
                                  You obtained {{ item }}!
                                  {%- endtrans %}
                                </li>
                                {% elif status['type'] == 'item_use' %}
                                <li>
                                  🎁
                                  {% trans item=status['item'], status_change=status['status_change'] -%}
                                  You used {{ item }}. <small>({{ status_change }})</small>
                                  {%- endtrans %}
                                </li>
                                {% elif status['type'] == 'item_use_fail' %}
                                <li>
                                  🎁
                                  {% trans item=status['item'], status_change=status['status_change'] -%}
                                  You tried to use {{ item }} but it doesn't works.
                                  {%- endtrans %}
                                </li>
                                {% else %}
                                <li>
                                  {{ status }}
                                </li>
                                {% endif %}
                                {% endfor %}
                            </ol>
                        </div>
                    </div>
                    {% elif result.type == 'level_up' %}
                    <div class="move mdl-card mdl-shadow--2dp
                                {% if 'last_block' in request.values and move.block_id > request.values.get('last_block')|int %}highlight{% endif %}">
                        <div class="mdl-card__supporting-text">
                          <sub><img src="{{ move_avatar.profile_image_url }}" alt="{{ avatar.name }} profile image" class="avatar-profile-image"> <b>{{ move_avatar.name }}</b> ∙ {{ move.created_at }}</sub>
                          <hr>
                        </div>
                        {% if result.result == 'success' %}
                        <div class="mdl-card__title">
                            <h2 class="mdl-card__title-text">🆙 {% trans lv=move_avatar.lv -%}Level Up! Now, your level is {{ lv }}.{%- endtrans %}</h2>
                        </div>
                        {% else %}
                        <div class="mdl-card__title">
                            <h2 class="mdl-card__title-text">😐 {% trans lv=move_avatar.lv -%}Level up was failed{%- endtrans %}</h2>
                        </div>
                        {% endif %}
                        <div class="mdl-card__supporting-text">
                            {% if result.message %}
                            <p>{{ result.message }}</p>
                            {% endif %}
                        </div>
                    </div>
                    {% elif result.type == 'sleep' %}
                    <div class="move sleep mdl-card mdl-shadow--2dp
                                {% if 'last_block' in request.values and move.block_id > request.values.get('last_block')|int %}highlight{% endif %}">
                        <div class="mdl-card__supporting-text">
                          <sub><img src="{{ move_avatar.profile_image_url }}" alt="{{ avatar.name }} profile image" class="avatar-profile-image"> <b>{{ move_avatar.name }}</b> ∙ {{ move.created_at }}</sub>
                        </div>
                        <div class="mdl-card__title mdl-card--expand">
                            <h2 class="mdl-card__title-text">
                            💤
                            {% trans -%}
                            HP was recovered by sleep.
                            {%- endtrans %}
                            </h2>
                        </div>
                    </div>
                    {% elif result.type == 'say' %}
                    <div class="move mdl-card mdl-shadow--2dp
                                {% if 'last_block' in request.values and move.block_id > request.values.get('last_block')|int %}highlight{% endif %}">
                        <div class="mdl-card__supporting-text">
                          <sub><img src="{{ move_avatar.profile_image_url }}" alt="{{ avatar.name }} profile image" class="avatar-profile-image"> <b>{{ move_avatar.name }}</b> ∙ {{ move.created_at }}</sub>
                          <hr>
                        </div>
                        <div class="mdl-card__title">
                            <h2 class="mdl-card__title-text">🗣 {{ result['message'] }}</h2>
                        </div>
                    </div>
                    {% elif result.type == 'send' %}
                    <div class="move mdl-card mdl-shadow--2dp
                                {% if 'last_block' in request.values and move.block_id > request.values.get('last_block')|int %}highlight{% endif %}">
                        <div class="mdl-card__supporting-text">
                          <sub><img src="{{ move_avatar.profile_image_url }}" alt="{{ avatar.name }} profile image" class="avatar-profile-image"> <b>{{ move_avatar.name }}</b> ∙ {{ move.created_at }}</sub>
                          <hr>
                        </div>
                        <div class="mdl-card__title mdl-card--expand">
                            <h2 class="mdl-card__title-text">🎁
                            {% trans amount=move.details['amount'], item=move.details['item_name'] -%}
                            You delievered {{ amount }} of {{ item }}.
                            {%- endtrans %}
                            </h2>
                        </div>
                        <div class="mdl-card__supporting-text">
                            <p>{% trans -%}Receiver: {%- endtrans %}{{ move.details['receiver'] }} </p>
                        </div>
                    </div>
                    {% elif result.type == 'combine' %}
                    <div class="move mdl-card mdl-shadow--2dp
                                {% if 'last_block' in request.values and move.block_id > request.values.get('last_block')|int %}highlight{% endif %}">
                        <div class="mdl-card__supporting-text">
                          <sub><img src="{{ move_avatar.profile_image_url }}" alt="{{ avatar.name }} profile image" class="avatar-profile-image"> <b>{{ move_avatar.name }}</b> ∙ {{ move.created_at }}</sub>
                          <hr>
                        </div>
                        <div class="mdl-card__title">
                            <h2 class="mdl-card__title-text">
                            {% if result.result == 'success' %}
                            🙌
                            {% trans result=result.result_item%}
                            You created {{ result }}.
                            {%- endtrans %}
                            {% else %}
                            😩
                            {% trans -%}
                            Your combination was failed.
                            {%- endtrans %}
                            {% endif %}
                            </h2>
                        </div>
                        <div class="mdl-card__supporting-text">
                            <p>{% trans item1=move.details['item1'],
                                        item2=move.details['item2'],
                                        item3=move.details['item3'] -%}
                               Ingredients: {{ item1 }}, {{ item2 }}, and {{ item3 }}
                               {%- endtrans %} </p>
                        </div>
                    </div>
                    {% else %}
                    <div class="move mdl-card mdl-shadow--2dp
                                {% if 'last_block' in request.values and move.block_id > request.values.get('last_block')|int %}highlight{% endif %}">
                        <div class="mdl-card__supporting-text">
                          <sub><img src="{{ move_avatar.profile_image_url }}" alt="{{ avatar.name }} profile image" class="avatar-profile-image"> <b>{{ move_avatar.name }}</b> ∙ {{ move.created_at }}</sub>
                          <hr>
                        </div>
                        <div class="mdl-card__title mdl-card--expand">
                            <h2 class="mdl-card__title-text">Move</h2>
                        </div>
                        <div class="mdl-card__supporting-text">
                            <p>{{ result }}</p>
                        </div>
                    </div>
                    {% endif %}
                </div>
                {% endfor %}
              </div>
            </div>
          </div>
          <!--<form action="https://t.me/nekoyume" target="_blank">
            <button type='submit' class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored telegram-button">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M9.78,18.65L10.06,14.42L17.74,7.5C18.08,7.19 17.67,7.04 17.22,7.31L7.74,13.3L3.64,12C2.76,11.75 2.75,11.14 3.84,10.7L19.81,4.54C20.54,4.21 21.24,4.72 20.96,5.84L18.24,18.65C18.05,19.56 17.5,19.78 16.74,19.36L12.6,16.3L10.61,18.23C10.38,18.46 10.19,18.65 9.78,18.65Z" /></svg>
            </button>
          </form>-->
          <script>
          var levelUp = function(new_status) {
              $('.level-up-form > input[name=new_status]').val(new_status);
              $('.level-up-form').submit();
          }
          </script>
      </main>
    </div>
</div>
<div id="tlkio" data-channel="nekoyume" data-theme="theme--day" data-nickname="{{ avatar.name }}"></div><script async src="//tlk.io/embed.js" type="text/javascript"></script>
{% if unconfirmed_move %}
<script>
var interval = setInterval(function() {
  $('.moves').load('/?last_block='+last_block+' .moves', function() {
    if($('.move-' + $('[name=unconfirmed-move-id]').val()).length > 0) {
      $('.move-bar-normal').removeClass('hidden');
      $('.move-bar-waiting').addClass('hidden');
      $('.avatar-status-section').load('/ .avatar-status-section');
      clearInterval(interval);
    }
  });
}, 5000);
</script>
{% endif %}
{% endblock %}
