{% extends "base.html" %}

{% block media %}
    <style>
        #control-button {
            margin-left: 0.8em;
            background: lightgray;
            color: black !important;
            border: 0;  
        }
        #control-button:hover {
            background: gray;
        }
        {% if request.user.is_authenticated and is_member %}
            #control-panel {
                display: none;
            }
        {% endif %}
        .leave-organization, .leave-organization:hover {
            color: red;
        }
        #control-list li {
            border-bottom: 1px solid black; 
        }
        #pending-count-box {
            float: right;
            text-align: center;
            background: red;
            color: white;
            border-radius: 3px;
            padding-left: 0.3em;
            padding-right: 0.3em;
        }
    </style>
{% endblock %}

{% block js_media %}
    <script type="text/javascript">
        $(function () {
            $('.leave-organization').click(function () {
                return confirm('{{ _('Are you sure you want to leave this organization?') }}\n' +
                    {% if organization.is_open %}
                        '{{ _('You will have to rejoin to show up on the organization leaderboard.') }}'
                    {% else %}
                        '{{ _('You will have to request membership in order to join again.') }}'
                    {% endif %}
                );
            });

            $(document).ready(function () {
                $('.blog-sidebar').hide();
                $('#info-tab').find('a').click(function (e) {
                    e.preventDefault();
                    $('#info-tab').addClass('active');
                    $('#detail-tab').removeClass('active');
                    $('.blog-content').show();
                    $('.blog-sidebar').hide();
                });
                $('#detail-tab').find('a').click(function (e) {
                    e.preventDefault();
                    $('#detail-tab').addClass('active');
                    $('#info-tab').removeClass('active');
                    $('.blog-content').hide();
                    $('.blog-sidebar').show();
                });
                $('#control-button').click(function(e) {
                    e.preventDefault();
                    $('#control-panel').toggle("fast");
                })
            });
        });

    </script>
{% endblock %}

{% block title_row %}
    <div class="page-title">
        <div class="tabs">
            <h2>{{title}}</h2>
            <span class="spacer"></span>
        
            {% if request.user.is_authenticated %}
                {% if is_member or can_edit %}
                    
                {% elif organization.is_open or can_edit %}
                    <form method="post" action="{{ url('join_organization', organization.id, organization.slug) }}">
                        {% csrf_token %}
                        <input type="submit" class="unselectable button" value="{{ _('Join organization') }}">
                    </form>
                {% else %}
                    <a href="{{ url('request_organization', organization.id, organization.slug) }}"
                       class="unselectable button">{{ _('Request membership') }}</a>
                {% endif %}
            {% endif %}
            <button id="control-button"><i class="fa fa-ellipsis-h"></i></button>
        </div>
    </div>
{% endblock %}
{% block title_ruler %} {% endblock %}
{% block body %}
    {% block before_posts %}{% endblock %}
    <div id="mobile" class="tabs">
        <ul>
            <li id="info-tab" class="tab active"><a href="#">
                <i class="tab-icon fa fa-info-circle"></i> {{ _('Info') }}
            </a></li>
            <li id="detail-tab" class="tab"><a href="#"><i class="tab-icon fa fa-rss"></i> {{ _('Details') }}</a></li>
        </ul>
    </div>
    <div id="blog-container">
        <div class="blog-content sidebox">
            <h3>{{ _('About') }}<i class="fa fa-info-circle"></i></h3>
            <div class="sidebox-content">
                <div style="margin: 1.4em;">
                    {% cache 3600 'organization_html' organization.id MATH_ENGINE %}
                        {{ organization.about|markdown('organization-about', MATH_ENGINE)|reference|str|safe }}
                    {% endcache %}
                </div>
            </div>
            {% if is_member or can_edit %}
                <br>
                <h3>{{ _('Organization news') }} <i class="fa fa-terminal"></i></h3>
                <div class="sidebox-content">
                    {% for post in posts %}
                        {% include "blog/content.html" %}
                    {% else %}
                        <div style="margin: 1.4em;">
                            <i>{{ _('There is no news at this time.') }}</i>
                        </div>
                    {% endfor %}
                </div>
            {% endif %}
        </div>

        <div class="blog-sidebar">
            <div id="control-panel" class="blog-sidebox sidebox">
                <h3>{{ _('Controls') }} <i class="fa fa-cog"></i></h3>
                <ul id="control-list" class="sidebox-content" style="padding: 1em;">
                    {% if can_edit %}
                        <li>
                            <div>
                                <a href="{{ url('edit_organization', organization.id, organization.slug) }}">{{ _('Edit organization') }}</a>
                            </div>
                        </li>
                        {% if not organization.is_open %}
                            <li>
                                <div>
                                    <a href="{{ url('organization_requests_pending', organization.id, organization.slug) }}">{{ _('View requests') }}</a>
                                    {% if pending_count > 0 %}
                                        <span id="pending-count-box">
                                            {{pending_count}}
                                        </span>
                                    {% endif %}
                                </div>
                            </li>
                        {% endif %}
                    {% endif %}
                    {% if perms.judge.change_organization %}
                    <li>
                        <div>
                            <a href="{{ url('admin:judge_organization_change', organization.id) }}">{{ _('Admin organization') }}</a>
                        </div>
                    </li>
                    {% endif %}
                    <li>
                        <div>
                            <a href="{{ organization.get_users_url() }}">{{ _('View members') }}</a>
                        </div>
                    </li>
                    {% if is_member and not can_edit %}
                    <li>
                        <form method="post" action="{{ url('leave_organization', organization.id, organization.slug) }}">
                            {% csrf_token %}
                            <a type="submit" href="#" class="leave-organization">{{ _('Leave organization') }}</a>
                        </form>
                    </li>
                    {% endif %}
                </ul>
            </div>
            {% if (is_member or can_edit) %}
                {% if new_contests %}
                    <div class="blog-sidebox sidebox">
                        <h3>{{ _('New private contests') }} <i class="fa fa-trophy"></i>
                        </h3>
                        <div class="sidebox-content">
                            <ul class="problem-list">
                                {% for contest in new_contests %}
                                    <li><a href="{{ url('contest_view', contest.key) }}">{{ contest.name }}</a></li>
                                {% endfor %}
                                
                            </ul>
                            <hr>
                            <center><a target="_blank" href="{{url('contest_list')+'?orgs='+str(organization.id)}}">{{_('View all')}}  <i class="fa fa-chevron-right"></i></a></center>
                        </div>
                    </div>
                {% endif %}
                {% if new_problems %}
                    <div class="blog-sidebox sidebox">
                        <h3>{{ _('New private problems') }} <i class="fa fa-puzzle-piece"></i>
                        </h3>
                        <div class="sidebox-content">
                            <ul class="problem-list">
                                {% for problem in new_problems %}
                                    <li><a href="{{ url('problem_detail', problem.code) }}">{{ problem.name }}</a></li>
                                {% endfor %}
                            </ul>
                            <hr>
                            <center><a target="_blank" href="{{url('problem_list')+'?orgs='+str(organization.id)}}">{{_('View all')}}  <i class="fa fa-chevron-right"></i></a></center>
                        </div>
                    </div>
                {% endif %}
            {% endif %}
        </div>
    </div>
    {% block after_posts %}{% endblock %}
{% endblock %}