{% extends 'main/base.html' %}

{% block content %}
<!--h4 style="text-align: center; color: white;">My Account</h4-->

<div class= "container white  black-text" style="opacity:.8; padding: 10px; border-radius: 5px; text-align: center; font-family: Trebuchet MS">
    <div class="row">
        <ul class="tabs" style="text-align: center; display: flex;">
            <li class="tab col s4"><a href="{% url 'main:profile' %}" style="color: black; ">Profile</a></li>
            <li class="tab col s4"><a href="{% url 'main:preferences' %}" style="color: black; ">Preferences</a></li>
            <li class="tab col s4"><a href="{% url 'main:sell' %}" style="color: black; background: orange;">Become a trader</a></li>
        </ul>
    </div>      
    
    <div class="row container">
        <table>
            <tr>
                <td style="border: none;"><b>Username</b></td>
                <td>{{seller.seller_key}}</td>
            </tr>
            <tr>
                <td style="border: none;"><b>Trader display name</b></td>
                <td>{{seller.seller_name|title}}</td>
            </tr>
            <tr>
                <td style="border: none;"><b>Trader status</b></td>
                {% ifequal seller.seller_type '' %}
                <td>New</td>
                {% else %}
                <td>{{seller.seller_type}}</td>
                {% endifequal %}
            </tr>
            <tr>
                <td style="border: none;"><b>Location</b></td>
                {% ifequal seller.location None %}
                <td>Unknown</td>
                {% else %}
                <td>{{seller.location|title}}</td>
                {% endifequal %}
            </tr>
            <tr>
                <td style="border: none;"><b>Completed Sales</b></td>
                {% ifequal seller.completed_sales None %}
                <td>0</td>
                {% else %}
                <td>{{seller.completed_sales}}</td>
                {% endifequal %}
            </tr>
        </table>
        <br>
        <a href="{% url 'main:editsell' %}" style="text-align: center; color: black; font-size: 18px; border: 1px solid gray; border-radius: 5px; padding: 5px; background: orange;">Edit</a>
    </div>

</div>        
{% endblock %}