{% extends "zerver/portico.html" %}

{% block portico_content %}
    <div class="feature-page-header">Feature comparison</div>

    <table class="side-by-side">
      <tr class="header-row">
        <th class="features-header">
        </th>
        <th class="product-header">
          <img src="/static/images/comparisons/zulip-logo.png" class="logo-header" title="Zulip" alt="Zulip" />
          <span class="logo-text">Zulip</span>
        </th>
        <th class="product-header">
          <img src="/static/images/comparisons/hipchat-logo.png" class="logo-header" title="Hipchat" alt="Hipchat" />
          <span class="logo-text">Hipchat</span>
        </th>
        <th class="product-header">
          <img src="/static/images/comparisons/campfire-logo.png" class="logo-header" title="Campfire" alt="Campfire" />
          <span class="logo-text">Campfire</span>
        </th>
        <th class="product-header">
          <img src="/static/images/comparisons/irc-logo.png" class="logo-header" title="IRC" alt="Campfire" />
          <span class="logo-text">IRC</span>
        </th>
      </tr>
      <tr class="feature-row">
        <td class="feature-name">
         Desktop and mobile apps
        </td>
        <td class="feature-presence feature-yes">
          <i class="icon-vector-ok"></i>
        </td>
        <td class="feature-presence feature-yes">
          <i class="icon-vector-ok"></i>
        </td>
        <td class="feature-presence feature-yes">
          <i class="icon-vector-ok"></i>
        </td>
        <td class="feature-presence feature-yes">
          <i class="icon-vector-ok"></i>
        </td>
      </tr>
      <tr class="feature-row">
        <td class="feature-name">
         Receive messages even if offline
        </td>
        <td class="feature-presence feature-yes">
          <i class="icon-vector-ok"></i>
        </td>
        <td class="feature-presence feature-yes">
          <i class="icon-vector-ok"></i>
        </td>
        <td class="feature-presence feature-yes">
          <i class="icon-vector-ok"></i>
        </td>
        <td class="feature-presence feature-no">
          <i class="icon-vector-remove"></i>
        </td>
      </tr>
      <tr class="feature-row">
        <td class="feature-name">
         Drag-and-drop image and file sharing
        </td>
        <td class="feature-presence feature-yes">
          <i class="icon-vector-ok"></i>
        </td>
        <td class="feature-presence feature-yes">
          <i class="icon-vector-ok"></i>
        </td>
        <td class="feature-presence feature-yes">
          <i class="icon-vector-ok"></i>
        </td>
        <td class="feature-presence feature-no">
          <i class="icon-vector-remove"></i>
        </td>
      </tr>
      <tr class="feature-row">
        <td class="feature-name">
         Image previews
        </td>
        <td class="feature-presence feature-yes">
          <i class="icon-vector-ok"></i>
        </td>
        <td class="feature-presence feature-yes">
          <i class="icon-vector-ok"></i>
        </td>
        <td class="feature-presence feature-yes">
          <i class="icon-vector-ok"></i>
        </td>
        <td class="feature-presence feature-no">
          <i class="icon-vector-remove"></i>
        </td>
      </tr>
      <tr class="feature-row">
        <td class="feature-name">
         Integrations with popular services
        </td>
        <td class="feature-presence feature-yes">
          <i class="icon-vector-ok"></i>
        </td>
        <td class="feature-presence feature-yes">
          <i class="icon-vector-ok"></i>
        </td>
        <td class="feature-presence feature-yes">
          <i class="icon-vector-ok"></i>
        </td>
        <td class="feature-presence feature-yes">
          <i class="icon-vector-ok"></i>
        </td>
      </tr>
      <tr class="feature-row">
        <td class="feature-name">
         REST API
        </td>
        <td class="feature-presence feature-yes">
          <i class="icon-vector-ok"></i>
        </td>
        <td class="feature-presence feature-yes">
          <i class="icon-vector-ok"></i>
        </td>
        <td class="feature-presence feature-yes">
          <i class="icon-vector-ok"></i>
        </td>
        <td class="feature-presence feature-no">
          <i class="icon-vector-remove"></i>
        </td>
      </tr>
      <tr class="feature-row">
        <td class="feature-name">
         One-on-one private messages
        </td>
        <td class="feature-presence feature-yes">
          <i class="icon-vector-ok"></i>
        </td>
        <td class="feature-presence feature-yes">
          <i class="icon-vector-ok"></i>
        </td>
        <td class="feature-presence feature-no">
          <i class="icon-vector-remove"></i>
        </td>
        <td class="feature-presence feature-yes">
          <i class="icon-vector-ok"></i>
        </td>
      </tr>
      <tr class="feature-row">
        <td class="feature-name">
         Group private messages
        </td>
        <td class="feature-presence feature-yes">
          <i class="icon-vector-ok"></i>
        </td>
        <td class="feature-presence feature-no">
          <i class="icon-vector-remove"></i>
        </td>
        <td class="feature-presence feature-no">
          <i class="icon-vector-remove"></i>
        </td>
        <td class="feature-presence feature-no">
          <i class="icon-vector-remove"></i>
        </td>
      </tr>
      <tr>
        <td class="feature-name">
         Email notification of missed PMs
        </td>
        <td class="feature-presence feature-yes">
          <i class="icon-vector-ok"></i>
        </td>
        <td class="feature-presence feature-yes">
          <i class="icon-vector-ok"></i>
        </td>
        <td class="feature-presence feature-no">
          <i class="icon-vector-remove"></i>
        </td>
        <td class="feature-presence feature-no">
          <i class="icon-vector-remove"></i>
        </td>
      </tr>
      <tr class="feature-row">
        <td class="feature-name">
         Threaded conversations
        </td>
        <td class="feature-presence feature-yes">
          <i class="icon-vector-ok"></i>
        </td>
        <td class="feature-presence feature-no">
          <i class="icon-vector-remove"></i>
        </td>
        <td class="feature-presence feature-no">
          <i class="icon-vector-remove"></i>
        </td>
        <td class="feature-presence feature-no">
          <i class="icon-vector-remove"></i>
        </td>
      </tr>
      <tr class="feature-row">
        <td class="feature-name">
         Mute conversations that aren't relevant
        </td>
        <td class="feature-presence feature-yes">
          <i class="icon-vector-ok"></i>
        </td>
        <td class="feature-presence feature-no">
          <i class="icon-vector-remove"></i>
        </td>
        <td class="feature-presence feature-no">
          <i class="icon-vector-remove"></i>
        </td>
        <td class="feature-presence feature-no">
          <i class="icon-vector-remove"></i>
        </td>
      </tr>
      <tr class="feature-row">
        <td class="feature-name">
         In-app search
        </td>
        <td class="feature-presence feature-yes">
          <i class="icon-vector-ok"></i>
        </td>
        <td class="feature-presence feature-no">
          <i class="icon-vector-remove"></i>
        </td>
        <td class="feature-presence feature-no">
          <i class="icon-vector-remove"></i>
        </td>
        <td class="feature-presence feature-no">
          <i class="icon-vector-remove"></i>
        </td>
      </tr>
      <tr class="feature-row">
        <td class="feature-name">
         Keyword alerts
        </td>
        <td class="feature-presence feature-yes">
          <i class="icon-vector-ok"></i>
        </td>
        <td class="feature-presence feature-no">
          <i class="icon-vector-remove"></i>
        </td>
        <td class="feature-presence feature-no">
          <i class="icon-vector-remove"></i>
        </td>
        <td class="feature-presence feature-yes">
          <i class="icon-vector-ok"></i>
        </td>
      </tr>
      <tr class="feature-row">
        <td class="feature-name">
         Code syntax highlighting
        </td>
        <td class="feature-presence feature-yes">
          <i class="icon-vector-ok"></i>
        </td>
        <td class="feature-presence feature-no">
          <i class="icon-vector-remove"></i>
        </td>
        <td class="feature-presence feature-no">
          <i class="icon-vector-remove"></i>
        </td>
        <td class="feature-presence feature-no">
          <i class="icon-vector-remove"></i>
        </td>
      </tr>
      <tr class="feature-row">
        <td class="feature-name">
         Emoji, because <img alt=":ghost:" class="emoji" src="/static/third/gemoji/images/emoji/ghost.png" title=":ghost:" /> <img alt=":thumbsup:" class="emoji" src="/static/third/gemoji/images/emoji/thumbsup.png" title=":thumbsup:" /> <img alt=":trophy:" class="emoji" src="/static/third/gemoji/images/emoji/trophy.png" title=":trophy:" />
        </td>
        <td class="feature-presence feature-yes">
          <i class="icon-vector-ok"></i>
        </td>
        <td class="feature-presence feature-no">
          <i class="icon-vector-remove"></i>
        </td>
        <td class="feature-presence feature-yes">
          <i class="icon-vector-ok"></i>
        </td>
        <td class="feature-presence feature-no">
          <i class="icon-vector-remove"></i>
        </td>
      </tr>
    </table>

    <div class="app feature-line">
      <div class="app-main feature-line-container centered-content">
            <a href="{% url 'signup' %}" class="bottom-signup-button btn btn-large btn-info">Sign up now</a>
      </div>
    </div>
{% endblock %}