{% load i18n %}
{% load sentry_api %}
{% load sentry_dsn %}
{% load sentry_features %}
{% load sentry_helpers %}
{% load sentry_react %}

{% load sentry_status %}
{% get_sentry_version %}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="robots" content="NONE,NOARCHIVE">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="{% url 'sentry-media' "sentry" "images/favicon.ico" %}" rel="shortcut icon" type="image/png"/>

  {% block css %}
  <link href="{% url 'sentry-media' "sentry" "dist/sentry.css" %}" rel="stylesheet"/>
  {% endblock %}

  <title>{% block title %}Sentry{% endblock %}</title>

  <!--[if lt IE 9]>
  <script type="text/javascript" src="{% url 'sentry-media' "sentry" "scripts/lib/html5shiv.js" %}"></script>
  <![endif]-->
  {% block scripts %}
  <script src="{% url 'sentry-media' "sentry" "dist/vendor.js" %}"></script>
  <script src="{% url 'sentry-media' "sentry" "dist/app.js" %}"></script>

  <script>
    (function(){
      for (var n in window.exports) {
        window[n] = window.exports[n];
      }
      window.$ = window.jQuery;

      window.moment.locale({{ request.LANGUAGE_CODE|to_json|safe }});
    }());

    Sentry.ConfigStore.loadInitialData({% get_react_config %});
  </script>

  {% include "sentry/includes/ravenjs.html" %}
  {% endblock %}

  {% block meta %}
  {% endblock %}
</head>

<body class="{% block wrapperclass %}{% endblock %}">
  {% block body %}
  <div class="app">
    {% if request.user.is_active_superuser %}
        {% show_system_status %}
    {% endif %}

    {% block alerts %}
    {% include "sentry/partial/alerts.html" %}
    {% endblock %}

    {% block header %}
    <header>
      <div class="container">
        {% if request.user.is_authenticated %}
        {% block account_nav %}
        <div class="pull-right">
          <div class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown">
              <span>
                <img src="{% gravatar_url user.email size 72 %}" class="avatar">
              </span>
              <i class="icon-arrow-down"></i>
            </a>
            <ul class="dropdown-menu dropdown-menu-right">
              <li><a href="{% url 'sentry-account-settings' %}">{% trans "Account" %}</a></li>
              {% if request.user.is_active_superuser %}
                <li><a href="{% url 'sentry-admin-overview' %}">{% trans "Admin" %}</a></li>
              {% endif %}
              <li><a href="{% url 'sentry-logout' %}">{% trans "Sign out" %}</a></li>
            </ul>
          </div>
        </div>
        {% endblock %}
        {% endif %}

        {% block logo %}
        <a href="/" class="logo"><span class="icon-sentry-logo"></span></a>
        {% endblock %}

        <ul class="global-nav pull-right">
          {% block global_nav %}
          <li><a href="https://docs.getsentry.com">{% trans "Docs" %}</a></li>
          {% endblock %}
        </ul>

        {% if not SINGLE_ORGANIZATION and request.user.is_authenticated and organization %}
        {% block org_selector %}
        <div class="org-selector pull-right">
          <div class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown">
              {{ organization.name }}
              <i class="icon-arrow-down"></i>
            </a>
            <ul class="dropdown-menu dropdown-menu-right">
              {% for org in request.user|list_organizations %}
                <li><a href="{% url 'sentry-organization-home' org.slug %}">{{ org.name }}</a></li>
              {% endfor %}
              {% feature organizations:create %}
                <li class="divider"></li>
                <li><a href="{% url 'sentry-create-organization' %}">New Organization</a></li>
              {% endfeature %}
            </ul>
          </div>
        </div>
        {% endblock %}
        {% endif %}
      </div>
    </header>
    {% endblock %}

    {% if organization and request.user.is_authenticated and project %}
    {% block sub-header %}
    <div class="sub-header">
      <div class="container">
        <div class="pull-right">
          {% block header_action %}{% endblock %}
        </div>
        <div id="blk_projectselect"></div>
        <script>
        $(function(){
          React.render(React.createFactory(Sentry.ProjectSelector)({
            organization: {% serialize_detailed_org organization %},
            projectId: '{{ project.slug }}'
          }), document.getElementById('blk_projectselect'));
        });
        </script>
      </div>
    </div>
    {% endblock %}
    {% endif %}

    <div class="container">
      {% block above_content %}{% endblock %}
      <div class="content">
        {% block content_before %}
        {% endblock %}
        {% block content %}
        <div class="row" id="blk_content">
          <div class="col-md-2">
            {% block sidebar %}
            {% endblock %}
          </div>
          <div class="col-md-10" id="blk_main">
            {% block main %}
            {% endblock %}
          </div>
        </div>
        {% endblock %}

        {% block content_after %}
        {% endblock %}
      </div>
    </div>
    <footer>
      <div class="container">
        {% block footer %}
        <div class="pull-right">
          {% if request.user.is_staff %}
          <a href="{% url 'sentry-admin-status' %}">{% trans "Admin" %}</a>
          {% endif %}
          {% block support_link %}{% endblock %}
          <a href="https://docs.getsentry.com/hosted/api/">{% trans "API" %}</a>
          <a href="https://docs.getsentry.com">{% trans "Docs" %}</a>
          <a href="https://github.com/getsentry/sentry">{% trans "Contribute" %}</a>
        </div>
        <div class="version pull-left">Sentry {{ sentry_version.current }} {% if sentry_version.update_available %}<a href="#" title="You're running an old version of Sentry, did you know {{ sentry_version.latest }} is available?" class="tip icon-circle-arrow-up">&nbsp;</a>{% endif %}</div>
        <a href="/" class="icon-sentry-logo"></a>
        {% endblock %}
      </div>
    </footer>
  </div>

  <div class="welcome-modal modal fade in" style="display: none">
    <div class="modal-dialog">
      <div class="modal-content">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <div class="modal-body">
          <div class="welcome-slides">
            <div class="slide">
              <div class="container">
                <h1>Welcome to Sentry</h1>
                <p>Hell yeah! Bout damn time we got this shit poppin'.</p>
                <p>
                  <a class="btn btn-default " href="#">Installation Instructions</a>
                  <a class="btn btn-primary " href="#">Start Overview</a>
                </p>
                <div class="screenshot fadeInUp" data-animate></div>
              </div>
            </div>
            <div class="slide">
              <div class="row">
                <div class="col-md-5 fadeIn" data-animate>
                  <h3>Teach Sentry about your business.</h3>
                  <p>Tag users, servers, shopping cart totals, or whatever is important to you.</p>
                  <p><a class="btn btn-primary" href="#">Learn more about Tagging</a></p>
                </div>
                <div class="col-md-7">
                  <div class="screenshot">
                    <div class="loupe zoomIn" data-animate></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="slide">
              <div class="row">
                <div class="col-md-7 chat-column">
                  <ul class="chat fadeInUp" data-animate>
                    <li class="chat-message">
                      <div class="chat-avatar"></div>
                      <h5>Sentry <time>8:02pm</time></h5>
                      <div class="chat-body">Regression on <a>Sentry Chef</a></div>
                      <blockquote>
                        <strong>'dict' object has no attribute 'startswith'</strong>
                        sentry.interfaces.stacktrace in is_unhashable_function
                      </blockquote>
                    </li>
                    <li class="chat-message">
                      <div class="chat-avatar"></div>
                      <h5>Sentry <time>8:02pm</time></h5>
                      <div class="chat-body">Regression on <a>Sentry Backend</a></div>
                      <blockquote>
                        <strong>Error processing 'send_webhook' on 'WebHooksPlugin':</strong>
                        six in reraise
                      </blockquote>
                    </li>
                    <li class="chat-message">
                      <div class="chat-avatar"></div>
                      <h5>Sentry <time>8:05pm</time></h5>
                      <div class="chat-body">Regression on <a>Sentry Chef</a></div>
                      <blockquote>
                        <strong>'dict' object has no attribute 'startswith'</strong>
                        sentry.interfaces.stacktrace in is_unhashable_function
                      </blockquote>
                    </li>
                    <li class="chat-message">
                      <div class="chat-avatar">
                        <img src="https://avatars3.githubusercontent.com/u/23610?v=3">
                      </div>
                      <h5>David <time>8:05pm</time></h5>
                      <div class="chat-body">Oh fuck</div>
                    </li>
                  </ul>
                </div>
                <div class="col-md-5">
                  <h3>Take us to work.</h3>
                  <p>Get notified of events in Slack, HipChat, Campfire, IRC, and more &mdash; in realtime.</p>
                  <p><a class="btn btn-primary" href="#">Learn more about Integrations</a></p>
                </div>
              </div>
              <div class="mask"></div>
            </div>
            <div class="slide">
              <div class="row">
                <div class="col-md-5">
                  <h3>Built for your workflow.</h3>
                  <p>Create issues in GitHub, Trello, Jira, Redmine, and others right from Sentry.</p>
                  <p><a class="btn btn-primary" href="#">Learn more about Issue Tracking</a></p>
                </div>
                <div class="col-md-7">
                  <div class="screenshot"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <div class="row">
            <div class="col-md-2">
              <a href="#" class="btn btn-default btn-sm prev slide-show-prev"><span class="icon-arrow-left"></span></a>
            </div>
            <div class="col-md-8">
              <ul class="dot-nav"></ul>
            </div>
            <div class="col-md-2">
              <a href="#" class="btn btn-default btn-sm next slide-show-next"><span class="icon-arrow-right"></span></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  {% block selectize %}
  <script>
  $(function() {
    $('select').select2();
  });
  </script>
  {% endblock %}
  <script>
  $('.auto-select').click(function() {
    if (document.selection) {
      var range = document.body.createTextRange();
      range.moveToElementText(this);
      range.select();
    } else if (window.getSelection) {
      var range = document.createRange();
      range.selectNode(this);
      window.getSelection().addRange(range);
    }
  });
  </script>
  <script type="text/javascript">
  $(function() {
    // This is duplicated from <ProjectSelector>
    $('.project-dropdown').on('shown.bs.dropdown', function(event){
      $(event.target).find('input[type=text]').focus();
    });
  });
  $(function() {
    var slideShow = function() {

      var slideWidth = $(".slide").width();
      var numSlides = 0;
      var currentSlide;

      // Find all slides

      $(".slide").each(function(i) {
        numSlides++;

        var slide = i + 1;
        var isActive;

        if ($(this).hasClass("active")) {
          isActive = true;
          currentSlide = slide;
        }

        $(this).addClass("slide-" + slide );

        // Build dot nav

        $(".dot-nav").append('<li class="'+ (isActive ? "active" : "") + '"><a href="#" class="show-slide" data-show-slide="'+ slide +'"></a></li>')
      });

      // Input handlers

      $(".show-slide").click(function() {
        showSlide($(this).attr("data-show-slide"));
      });

      $(".close").click(function() {
        $(".welcome-modal").fadeOut();
      });

      $(".slide-show-next").click(function() {
        if (currentSlide + 1 <= numSlides) {
          showSlide(currentSlide + 1);
        } else {
          showSlide(1);
        }
      });

      $(".slide-show-prev").click(function() {
        if (currentSlide - 1 != 0) {
          showSlide(currentSlide - 1);
        } else {
          showSlide(numSlides);
        }
      });

      this.showSlide = function(location) {
        currentSlide = location;

        // Clear active items
        $(".slide").removeClass("active");
        $(".dot-nav li").removeClass("active");

        // Set new active items

        $(".dot-nav li a[data-show-slide="+ location +"]").parent("li").addClass("active");
        $(".slide-" + location).addClass("active");

        // Use margin to show slide

        $(".welcome-slides").css("margin-left", -(slideWidth * location) + slideWidth);

        // Animate shit

        $(".slide-" + location + " [data-animate]").addClass("animated");
      }

      showSlide(1);
    }

    // $( "body" ).keypress(function( event ) {
    //   if ( event.which == 96 ) {
    //      event.preventDefault();
    //      $(".welcome-modal").fadeIn();
    //   }
    // });

    slideShow();
  });
  </script>
  {% endblock %}

  {% load_captcha %}

  {% block scripts_bottom %}{% endblock %}
</body>
</html>
