<div class="profile">

  <div class="profile-window">
    <div class="profile-section vertical centered">
      <div class="align-right profile-action dropdown dropdown--actions">
        <div class="dropdown-toggle" id="organizationProfile" data-toggle="dropdown">
          <%- @Icon('cog', 'dropdown-icon') %>
          <label>Aktion</label>
          <%- @Icon('arrow-down') %>
        </div>
        <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="organizationProfile">
          <li role="presentation"><a role="menuitem" tabindex="-1">Kontaktdaten bearbeiten</a>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Änderungsprotokoll</a>
          <li role="presentation"><a role="menuitem" tabindex="-1">Benutzer zusammenführen</a>
          <li role="presentation"><a role="menuitem" tabindex="-1">Benutzer löschen</a>
        </ul>
      </div>
      <div class="profile-organizationIcon">
        <%- @Icon('organization') %>
      </div>
      <h1>Steuerbüro C. Kaik</h1>
    </div>
    <div class="profile-section">
      <div class="profile-details  horizontal wrap">
        <div class="profile-detailsEntry">
          <label>Web</label>
          <a href="http://ckaik.com" target="_blank">chaik.com</a>
        </div>
        <div class="profile-detailsEntry">
          <label>Strasse</label>
          Johannitergasse 2/2
        </div>
        <div class="profile-detailsEntry">
          <label>Telefon</label>
          +43 5522 36346
        </div>
        <div class="profile-detailsEntry">
          <label>PLZ, ORT</label>
          6800 Feldkirch
        </div>
        <div class="profile-detailsEntry">
          <label>Mobile-Nr.</label>
          +43 699 4565789
        </div>
        <div class="profile-detailsEntry">
          <label>Land</label>
          Österreich
        </div>
      </div>
    </div>
    <div class="profile-section profile-memberSection">
      <label><%- @T('Members') %></label>
      <div class="profile-details horizontal wrap">
        <div class="profile-organizationMember">
          <span class="avatar avatar--unique user-popover  size-40" data-id="4" style="background-position: -97.5718417033075px -178.430732445616px;">AG</span>
          <a href="#">Doreen Kubiak</a>
        </div>
        <div class="profile-organizationMember">
          <div class="avatar" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"></div>
          <a href="#">Franz Xaver</a>
        </div>
        <div class="profile-organizationMember">
          <span class="avatar avatar--unique user-popover  size-40" data-id="4" style="background-position: -27.5718417033075px -17.430732445616px;">JM</span>
          <a href="#">Julius Müller</a>
        </div>
        <div class="profile-organizationMember">
          <span class="avatar avatar--unique user-popover  size-40" data-id="4" style="background-position: -97.5718417033075px -178.430732445616px;">HH</span>
          <a href="#">Hans Hubert</a>
        </div>
      </div>
    </div>
    <div class="profile-section">
      <div class="profile-ticketLists">
        <div class="profile-ticketList">
          <label>Offene Tickets (23)</label>
          <ol class="tasks tasks--standalone">
            <li class="task">
              <div class="icon-holder">
                <%- @Icon('task-state', 'open') %>
              </div>
              <div class="task-text">
                <div class="name">Micro-SIM doesn't work</div>
                <div class="time">23 minutes ago</div>
              </div>
            <li class="task">
              <div class="icon-holder">
                <%- @Icon('task-state', 'pending') %>
              </div>
              <div class="task-text">
                <div class="name">Superb Service here_with_some_extrem_example_sting_witch_can_really_be!</div>
                <div class="time">43 minutes ago</div>
              </div>
            <li class="task">
              <div class="icon-holder">
                <%- @Icon('task-state', 'closed') %>
              </div>
              <div class="task-text">
                <div class="name">Print sheets strip off</div>
                <div class="time">1 hour ago</div>
              </div>
            <li class="task">
              <div class="icon-holder">
                <%- @Icon('task-state', 'closed') %>
              </div>
              <div class="task-text">
                <div class="name">Block not properly wrought</div>
                <div class="time">2 hour ago</div>
              </div>
          </ol>
          <a href="#">Alle Tickets von Doreen Kubiak …</a>
        </div>
        <div class="profile-ticketList">
          <label>Bearbeitete Tickets (12)</label>
          <ol class="tasks tasks--standalone">
            <li class="task">
              <div class="icon-holder">
                <%- @Icon('task-state', 'pending') %>
              </div>
              <div class="task-text">
                <div class="name">Micro-SIM doesn't work</div>
                <div class="time">23 minutes ago</div>
              </div>
            <li class="task">
              <div class="icon-holder">
                <%- @Icon('task-state', 'closed') %>
              </div>
              <div class="task-text">
                <div class="name">Superb Service!</div>
                <div class="time">43 minutes ago</div>
              </div>
          </ol>
          <a href="#">Alle Tickets von Steuerbüro C. Kaik …</a>
        </div>
      </div>
    </div>
    <div class="profile-section">
      <div class="frequency stat-widget vertical">
        <div class="stat-title"><%- @T('Frequency') %></div>
        <div class="stat-graphic">
          <div class="stats-row">
            <div class="stat-bars">
              <div class="stat-bar primary" style="height: 80%"></div>
              <div class="stat-bar secondary" style="height: 34%"></div>
            </div>
            <div class="stat-label">Jan</div>
          </div>
          <div class="stats-row">
            <div class="stat-bars">
              <div class="stat-bar primary" style="height: 53%"></div>
              <div class="stat-bar secondary" style="height: 47%"></div>
            </div>
            <div class="stat-label">Feb</div>
          </div>
          <div class="stats-row">
            <div class="stat-bars">
              <div class="stat-bar primary" style="height: 46%"></div>
              <div class="stat-bar secondary" style="height: 21%"></div>
            </div>
            <div class="stat-label">Mär</div>
          </div>
          <div class="stats-row">
            <div class="stat-bars">
              <div class="stat-bar primary" style="height: 24%"></div>
              <div class="stat-bar secondary" style="height: 18%"></div>
            </div>
            <div class="stat-label">Apr</div>
          </div>
          <div class="stats-row">
            <div class="stat-bars">
              <div class="stat-bar primary" style="height: 13%"></div>
              <div class="stat-bar secondary" style="height: 5%"></div>
            </div>
            <div class="stat-label">Mai</div>
          </div>
          <div class="stats-row">
            <div class="stat-bars">
              <div class="stat-bar primary" style="height: 18%"></div>
              <div class="stat-bar secondary" style="height: 10%"></div>
            </div>
            <div class="stat-label">Jun</div>
          </div>
          <div class="stats-row">
            <div class="stat-bars">
              <div class="stat-bar primary" style="height: 50%"></div>
              <div class="stat-bar secondary" style="height: 8%"></div>
            </div>
            <div class="stat-label">Jul</div>
          </div>
          <div class="stats-row">
            <div class="stat-bars">
              <div class="stat-bar primary" style="height: 67%"></div>
              <div class="stat-bar secondary" style="height: 13%"></div>
            </div>
            <div class="stat-label">Aug</div>
          </div>
          <div class="stats-row">
            <div class="stat-bars">
              <div class="stat-bar primary" style="height: 34%"></div>
              <div class="stat-bar secondary" style="height: 2%"></div>
            </div>
            <div class="stat-label">Sep</div>
          </div>
          <div class="stats-row">
            <div class="stat-bars">
              <div class="stat-bar primary" style="height: 5%"></div>
              <div class="stat-bar secondary" style="height: 0%"></div>
            </div>
            <div class="stat-label">Okt</div>
          </div>
          <div class="stats-row">
            <div class="stat-bars">
              <div class="stat-bar primary" style="height: 25%"></div>
              <div class="stat-bar secondary" style="height: 0%"></div>
            </div>
            <div class="stat-label">Nov</div>
          </div>
          <div class="stats-row">
            <div class="stat-bars">
              <div class="stat-bar primary" style="height: 80%"></div>
              <div class="stat-bar secondary" style="height: 5%"></div>
            </div>
            <div class="stat-label">Dez</div>
          </div>
        </div>
        <div class="stat-legend">
          <div class="stat-legendEntry primary">
            <span class="primary stat-circle"></span>
            <span class="stat-legend-label">Bearbeitet</span>
          </div>
          <div class="stat-legendEntry secondary">
            <span class="secondary stat-circle"></span>
            <span class="stat-legend-label">Offen</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>