{% extends "cosinnus/base.html" %}
{% load i18n cosinnus_tags %}
{% load static from staticfiles %}

{% block page_title %}{{ group.name }} {{ block.super }}{% endblock page_title %}

{% block extrahead %}
  <link href="{% static "css/cosinnus.dashboard.css" %}" rel="stylesheet">
{% endblock extrahead %}


{% block main_page_header %}
    
    <div class="alert alert-warning alert-dismissable">
        <i class="fa fa-exclamation-circle fa-3x"></i>
        <p>{% trans "This page is a preview of many good things to come! It is heavily under development and many features are incomplete or may not work properly yet!" %}</p>
    </div>
    
    
    <a name="microsite"></a>
    <div class="row">
        <!-- start with left navigation -->
        <div class="col-lg-3 col-md-3"><!-- left column -->
            {% if group %}
                {% cosinnus_menu "cosinnus/appsmenu.html" %}
            {% endif %}
        </div><!-- left column -->
        
        <!-- now the content -->
        <div class="col-lg-9 col-md-9"><!-- right column -->
            
            <ol class="breadcrumb">
                {% include 'cosinnus/breadcrumb.html' %}
                <li class="active">{% trans "Microsite" %}</li>
            </ol>
            
        </div><!-- right column -->
        
    </div><!-- row -->
    
    {% include 'cosinnus/messages.html' %}
    
{% endblock main_page_header %}
            

{% block main_page %}
    
    <div class="row large-space">
        <div class="col-sm-2 large-space">
           {% include 'cosinnus/group/group_avatar_image.html' with extra_classes="w100" %}
        </div>
        <div class="col-sm-10 bottom-align large-space">
            
            <div class="position-relative"><!-- just for fun -->
                {% if user|has_write_access:group %}
                    <button type="button" class="btn btn-emphasized bottom-align" href="{% if edit_mode %}{% group_url 'cosinnus:group-microsite' group=group %}{% else %}{% group_url 'cosinnus:group-microsite-edit' group=group %}{% endif %}">
                        <ul class="media-list">
                            <li class="media">
                                <a class="pull-left" href="#">
                                    <i class="fa {% if edit_mode %}fa-reply{% else %}fa-cogs{% endif %}"></i>
                                </a>
                                <div class="media-body">
                                    {% if edit_mode %}{% trans "Done" %}{% else %}{% trans "Configure" %}{% endif %}
                                </div>
                            </li>
                        </ul>
                    </button><!-- btn -->
                {% elif user.pk in group.pendings %}
                    <button type="button" class="btn btn-emphasized bottom-align" data-toggle="modal" data-target="#join_withdraw_modal">
                        <ul class="media-list">
                            <li class="media">
                                <a class="pull-left" href="#">
                                    <i class="fa fa-sign-out"></i>
                                </a>
                                <div class="media-body">
                                    {% trans "Withdraw request" %} 
                                </div>
                            </li>
                        </ul>
                    </button><!-- btn -->
                {% elif user.is_authenticated %}
                    <button type="button" class="btn btn-emphasized bottom-align" data-toggle="modal" data-target="#join_withdraw_modal">
                        <ul class="media-list">
                            <li class="media">
                                <a class="pull-left" href="#">
                                    <i class="fa fa-sign-in"></i>
                                </a>
                                <div class="media-body">
                                    {% trans "Join" %} 
                                </div>
                            </li>
                        </ul>
                    </button><!-- btn -->
                {% endif %}
                
                <legend class="large-space">{{ group.name }}</legend>
            </div>
            
        </div>
        
        {% if user.pk in group.pendings %}
            {% captureas label %}{% blocktrans with title=group.name %}Do you really want to withdraw your join request to „{{ title }}“?{% endblocktrans %}{% endcaptureas %}
            {% captureas title %}{% trans "Withdraw Join Request" %}{% endcaptureas %}
            {% captureas action %}{% group_url 'cosinnus:group-user-withdraw' group=group %}{% endcaptureas %}
            {% include "cosinnus/modal_box.html" with id="join_withdraw_modal" label=label title=title form_action=action %}
        {% elif user.is_authenticated %}
            {% captureas label %}{% blocktrans with title=group.name %}Do you wish to request to join „{{ title }}“?{% endblocktrans %}{% endcaptureas %}
            {% captureas title %}{% trans "Join" %}{% endcaptureas %}
            {% captureas action %}{% group_url 'cosinnus:group-user-join' group=group %}{% endcaptureas %}
            {% include "cosinnus/modal_box.html" with id="join_withdraw_modal" label=label title=title form_action=action %}
        {% endif %}
    </div><!-- row -->
    
    
    
    
    
    
    <div id="dashboard" class="row large-space">
	    {% for widget in widgets %}
	        {% cosinnus_render_widget widget %}
	    {% endfor %}
    
    
	    {% if edit_mode and group and user|has_write_access:group %}
	        <div data-type="widget-anchor" style="display:none;"></div>
	        
	        <div class="col-lg-4 col-md-4 large-space app-todos" data-type="widget-add">
	            <button type="button" class="btn btn-emphasized btn-headline" href="" data-widget-id="0" data-target="widget-add-button">
	                <ul class="media-list ">
	                    <li class="media">
	                        <a class="pull-left btn-extra-emphasized" href="#"></a>
	                        <a class="pull-left" href="#">
	                            <i class="fa fa-plus"></i>
	                        </a>
	                        <div class="media-body">
	                            {% trans "Add widget" %}
	                        </div>
	                    </li>
	                </ul>
	            </button><!-- btn -->
	            <div data-target="widget-add-button">
	                <span class="glyphicon glyphicon-plus"></span>
	            </div>
	        </div>
	        
	    {% endif %}
    </div>
    
    
    {% with micropages=group.micropages.all %}
       <a name="micropages"></a>
       <div class="row large-space">
           <div class="col-md-3">
   
               <div type="button" class="btn btn-emphasized btn-headline regular-space">
                   <ul class="media-list">
                       <li class="media">
                           <a class="pull-left btn-extra-emphasized" href="#"></a>
                           <div class="media-body">
                               {% trans "Informations" %}
                           </div>
                       </li>
                   </ul>
               </div><!-- btn -->
               
               {% for micropage in micropages %}
                  <div type="button" data-id="micropage_{{ forloop.counter }}" data-toggle-group="micropage" class="toggleable_button btn btn-emphasized {% if not forloop.last %}fine-space{% endif %} w100">
                      <ul class="media-list">
                          <li class="media">
                              <a data-id="micropage_{{ forloop.counter }}" data-toggle-group="micropage" {% if not forloop.first %}style="display:none;"{% endif %} class="toggleable_content pull-right btn-extra-emphasized" href="#">
                                  <i class="fa fa-chevron-right"></i>
                              </a>
                              <div class="media-body">
                                  {{ micropage.title }}
                              </div>
                          </li>
                      </ul>
                  </div><!-- btn -->
               {% endfor %}
   
           </div><!-- left column -->
           
           {% for micropage in micropages %}
               <div data-id="micropage_{{ forloop.counter }}" data-toggle-group="micropage" {% if not forloop.first %}style="display:none;"{% endif %} class="toggleable_content col-md-9">
                   <div class="content-box transparent_p">
                       <legend>{{ micropage.title }}</legend>
                       {% if micropage.text and micropage.text|length > 0 %}
                            {{ micropage.text|textfield }}
                       {% else %}
                           ({% trans "No informations set" %})
                       {% endif %}
                   </div>
               </div><!-- right column -->
           {% empty %}
                <div class="col-md-9">
                   <div class="content-box transparent_p">
                       <legend>{% trans "Description" %}</legend>
                       {% if group.description %}
                           <div class="textfield">{{ group.description|textfield }}</div>
                       {% else %}
                           <p>({% trans "No informations set" %})</p>
                       {% endif %}
                   </div>
               </div><!-- right column -->
           {% endfor %}
       </div><!-- row -->
       
       <div class="row large-space">
            <div class="col-md-3">
            </div><!-- left column -->
            <div class="col-md-9">
               <label>
                   <a href="#microsite">
                       <i class="fa fa-fw fa-caret-up"></i>
                       {% trans "Back to Project Overview" %}
                   </a>
               </label>
           </div><!-- right column -->
       </div><!-- row -->
       
    {% endwith %}
    
    {% for item_inline in item_inlines %}
        <a name="micro_{{ item_inline.app_name}}"></a>
        <div class="{% if item_inline.app_name == 'todo' %}app-todos{% elif item_inline.app_name == 'note' %}app-main{% elif item_inline.app_name == 'file' %}app-files{% elif item_inline.app_name == 'event' %}app-calendar{% elif item_inline.app_name %}app-{{ item_inline.app_name }}{% else %}app-main{% endif %}">
            {# This used to be {{ item_inline.content|safe }}, but the |safe was removed, because the content is NOT safe! #}
            {# If this isn't rendered correctly, you now know why! #}
            {{ item_inline.content }} 
        </div>
        
        <div class="row large-space">
            <div class="col-md-3">
            </div><!-- left column -->
             <div class="col-md-9">
                <label>
                    <a href="#microsite">
                        <i class="fa fa-fw fa-caret-up"></i>
                        {% trans "Back to Project Overview" %}
                    </a>
                </label>
            </div><!-- right column -->
        </div><!-- row -->
    {% endfor %}


{% endblock main_page %}


{% block extrafooter %}
  {{ block.super }}

  <script src="{% static "js/cosinnus.dashboard.js" %}"></script>
  <script type="text/javascript">
    $(document).ready(function(){
        $.cosinnus.toggleable();
        $('.transparent_p p').addClass('transparent');
        
        var dashboard = window.Cosinnus.dashboard.init("#dashboard", {% if group.slug %}"{{ group.slug }}"{% else %}null{% endif %});
    });
  </script>
{% endblock %}