diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9ce06c8..9645027 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -40,6 +40,11 @@
 - Update to Spectre 0.9.0.  
   [Ilya Puchka](https://github.com/ilyapuchka)
   [#247](https://github.com/stencilproject/Stencil/pull/247)
+- Optimise Scanner performance.  
+  [Eric Thorpe](https://github.com/trametheka)
+  [Sébastien Duperron](https://github.com/Liquidsoul)
+  [David Jennes](https://github.com/djbe)
+  [#226](https://github.com/stencilproject/Stencil/pull/226)
 
 
 ## 0.12.1
diff --git a/Sources/Lexer.swift b/Sources/Lexer.swift
index 26d6a1a..015b7d7 100644
--- a/Sources/Lexer.swift
+++ b/Sources/Lexer.swift
@@ -7,6 +7,18 @@ struct Lexer {
   let templateString: String
   let lines: [Line]
 
+  /// The potential token start characters. In a template these appear after a
+  /// `{` character, for example `{{`, `{%`, `{#`, ...
+  private static let tokenChars: [Unicode.Scalar] = ["{", "%", "#"]
+
+  /// The token end characters, corresponding to their token start characters.
+  /// For example, a variable token starts with `{{` and ends with `}}`
+  private static let tokenCharMap: [Unicode.Scalar: Unicode.Scalar] = [
+    "{": "}",
+    "%": "%",
+    "#": "#"
+  ]
+
   init(templateName: String? = nil, templateString: String) {
     self.templateName = templateName
     self.templateString = templateString
@@ -17,12 +29,19 @@ struct Lexer {
     }
   }
 
+  /// Create a token that will be passed on to the parser, with the given
+  /// content and a range. The content will be tested to see if it's a
+  /// `variable`, a `block` or a `comment`, otherwise it'll default to a simple
+  /// `text` token.
+  ///
+  /// - Parameters:
+  ///   - string: The content string of the token
+  ///   - range: The range within the template content, used for smart
+  ///            error reporting
   func createToken(string: String, at range: Range<String.Index>) -> Token {
     func strip() -> String {
       guard string.count > 4 else { return "" }
-      let start = string.index(string.startIndex, offsetBy: 2)
-      let end = string.index(string.endIndex, offsetBy: -2)
-      let trimmed = String(string[start..<end])
+      let trimmed = String(string.dropFirst(2).dropLast(2))
         .components(separatedBy: "\n")
         .filter({ !$0.isEmpty })
         .map({ $0.trim(character: " ") })
@@ -50,26 +69,22 @@ struct Lexer {
     return .text(value: string, at: sourceMap)
   }
 
-  /// Returns an array of tokens from a given template string.
+  /// Transforms the template into a list of tokens, that will eventually be
+  /// passed on to the parser.
+  ///
+  /// - Returns: The list of tokens (see `createToken(string: at:)`).
   func tokenize() -> [Token] {
     var tokens: [Token] = []
 
     let scanner = Scanner(templateString)
-
-    let map = [
-      "{{": "}}",
-      "{%": "%}",
-      "{#": "#}",
-      ]
-
     while !scanner.isEmpty {
-      if let text = scanner.scan(until: ["{{", "{%", "{#"]) {
-        if !text.1.isEmpty {
-          tokens.append(createToken(string: text.1, at: scanner.range))
+      if let (char, text) = scanner.scanForTokenStart(Lexer.tokenChars) {
+        if !text.isEmpty {
+          tokens.append(createToken(string: text, at: scanner.range))
         }
 
-        let end = map[text.0]!
-        let result = scanner.scan(until: end, returnUntil: true)
+        guard let end = Lexer.tokenCharMap[char] else { continue }
+        let result = scanner.scanForTokenEnd(end)
         tokens.append(createToken(string: result, at: scanner.range))
       } else {
         tokens.append(createToken(string: scanner.content, at: scanner.range))
@@ -80,6 +95,11 @@ struct Lexer {
     return tokens
   }
 
+  /// Finds the line matching the given range (for a token)
+  ///
+  /// - Parameter range: The range to search for.
+  /// - Returns: The content for that line, the line number and offset within
+  ///            the line.
   func rangeLocation(_ range: Range<String.Index>) -> ContentLocation {
     guard let line = self.lines.first(where: { $0.range.contains(range.lowerBound) }) else {
       return ("", 0, 0)
@@ -95,6 +115,11 @@ class Scanner {
   var content: String
   var range: Range<String.Index>
 
+  /// The start delimiter for a token.
+  private static let tokenStartDelimiter: Unicode.Scalar = "{"
+  /// And the corresponding end delimiter for a token.
+  private static let tokenEndDelimiter: Unicode.Scalar = "}"
+
   init(_ content: String) {
     self.originalContent = content
     self.content = content
@@ -105,64 +130,69 @@ class Scanner {
     return content.isEmpty
   }
 
-  func scan(until: String, returnUntil: Bool = false) -> String {
-    var index = content.startIndex
+  /// Scans for the end of a token, with a specific ending character. If we're
+  /// searching for the end of a block token `%}`, this method receives a `%`.
+  /// The scanner will search for that `%` followed by a `}`.
+  ///
+  /// Note: if the end of a token is found, the `content` and `range`
+  /// properties are updated to reflect this. `content` will be set to what
+  /// remains of the template after the token. `range` will be set to the range
+  /// of the token within the template.
+  ///
+  /// - Parameter tokenChar: The token end character to search for.
+  /// - Returns: The content of a token, or "" if no token end was found.
+  func scanForTokenEnd(_ tokenChar: Unicode.Scalar) -> String {
+    var foundChar = false
 
-    if until.isEmpty {
-      return ""
-    }
-
-    range = range.upperBound..<range.upperBound
-    while index != content.endIndex {
-      let substring = String(content[index...])
-
-      if substring.hasPrefix(until) {
-        let result = String(content[..<index])
-
-        if returnUntil {
-          range = range.lowerBound..<originalContent.index(range.upperBound, offsetBy: until.count)
-          content = String(substring[until.endIndex...])
-          return result + until
-        }
-
-        content = substring
+    for (index, char) in content.unicodeScalars.enumerated() {
+      if foundChar && char == Scanner.tokenEndDelimiter {
+        let result = String(content.prefix(index))
+        content = String(content.dropFirst(index + 1))
+        range = range.upperBound..<originalContent.index(range.upperBound, offsetBy: index + 1)
         return result
+      } else {
+        foundChar = (char == tokenChar)
       }
-
-      index = content.index(after: index)
-      range = range.lowerBound..<originalContent.index(after: range.upperBound)
     }
 
     content = ""
     return ""
   }
 
-  func scan(until: [String]) -> (String, String)? {
-    if until.isEmpty {
-      return nil
-    }
+  /// Scans for the start of a token, with a list of potential starting
+  /// characters. To scan for the start of variables (`{{`), blocks (`{%`) and
+  /// comments (`{#`), this method receives the characters `{`, `%` and `#`.
+  /// The scanner will search for a `{`, followed by one of the search
+  /// characters. It will give the found character, and the content that came
+  /// before the token.
+  ///
+  /// Note: if the start of a token is found, the `content` and `range`
+  /// properties are updated to reflect this. `content` will be set to what
+  /// remains of the template starting with the token. `range` will be set to
+  /// the start of the token within the template.
+  ///
+  /// - Parameter tokenChars: List of token start characters to search for.
+  /// - Returns: The found token start character, together with the content
+  ///            before the token, or nil of no token start was found.
+  func scanForTokenStart(_ tokenChars: [Unicode.Scalar]) -> (Unicode.Scalar, String)? {
+    var foundBrace = false
 
-    var index = content.startIndex
     range = range.upperBound..<range.upperBound
-    while index != content.endIndex {
-      let substring = String(content[index...])
-      for string in until {
-        if substring.hasPrefix(string) {
-          let result = String(content[..<index])
-          content = substring
-          return (string, result)
-        }
+    for (index, char) in content.unicodeScalars.enumerated() {
+      if foundBrace && tokenChars.contains(char) {
+        let result = String(content.prefix(index - 1))
+        content = String(content.dropFirst(index - 1))
+        range = range.upperBound..<originalContent.index(range.upperBound, offsetBy: index - 1)
+        return (char, result)
+      } else {
+        foundBrace = (char == Scanner.tokenStartDelimiter)
       }
-
-      index = content.index(after: index)
-      range = range.lowerBound..<originalContent.index(after: range.upperBound)
     }
 
     return nil
   }
 }
 
-
 extension String {
   func findFirstNot(character: Character) -> String.Index? {
     var index = startIndex
diff --git a/Tests/StencilTests/LexerSpec.swift b/Tests/StencilTests/LexerSpec.swift
index 6f49a4c..ebc114e 100644
--- a/Tests/StencilTests/LexerSpec.swift
+++ b/Tests/StencilTests/LexerSpec.swift
@@ -1,10 +1,16 @@
-import XCTest
+import PathKit
 import Spectre
 @testable import Stencil
+import XCTest
 
 class LexerTests: XCTestCase {
   func testLexer() {
     describe("Lexer") {
+      func makeSourceMap(_ token: String, for lexer: Lexer, options: String.CompareOptions = []) -> SourceMap {
+        guard let range = lexer.templateString.range(of: token, options: options) else { fatalError("Token not found") }
+        return SourceMap(location: lexer.rangeLocation(range))
+      }
+
       $0.it("can tokenize text") {
         let lexer = Lexer(templateString: "Hello World")
         let tokens = lexer.tokenize()
@@ -44,9 +50,9 @@ class LexerTests: XCTestCase {
         let tokens = lexer.tokenize()
 
         try expect(tokens.count) == 3
-        try expect(tokens[0]) == Token.text(value: "My name is ", at: SourceMap(location: lexer.rangeLocation(templateString.range(of: "My name is ")!)))
-        try expect(tokens[1]) == Token.variable(value: "myname", at: SourceMap(location: lexer.rangeLocation(templateString.range(of: "myname")!)))
-        try expect(tokens[2]) == Token.text(value: ".", at: SourceMap(location: lexer.rangeLocation(templateString.range(of: ".")!)))
+        try expect(tokens[0]) == Token.text(value: "My name is ", at: makeSourceMap("My name is ", for: lexer))
+        try expect(tokens[1]) == Token.variable(value: "myname", at: makeSourceMap("myname", for: lexer))
+        try expect(tokens[2]) == Token.text(value: ".", at: makeSourceMap(".", for: lexer))
       }
 
       $0.it("can tokenize two variables without being greedy") {
@@ -55,43 +61,69 @@ class LexerTests: XCTestCase {
         let tokens = lexer.tokenize()
 
         try expect(tokens.count) == 2
-        try expect(tokens[0]) == Token.variable(value: "thing", at: SourceMap(location: lexer.rangeLocation(templateString.range(of: "thing")!)))
-        try expect(tokens[1]) == Token.variable(value: "name", at: SourceMap(location: lexer.rangeLocation(templateString.range(of: "name")!)))
+        try expect(tokens[0]) == Token.variable(value: "thing", at: makeSourceMap("thing", for: lexer))
+        try expect(tokens[1]) == Token.variable(value: "name", at: makeSourceMap("name", for: lexer))
       }
 
       $0.it("can tokenize an unclosed block") {
         let lexer = Lexer(templateString: "{%}")
-        let _ = lexer.tokenize()
+        _ = lexer.tokenize()
+      }
+
+      $0.it("can tokenize incorrect syntax without crashing") {
+        let lexer = Lexer(templateString: "func some() {{% if %}")
+        _ = lexer.tokenize()
       }
 
       $0.it("can tokenize an empty variable") {
         let lexer = Lexer(templateString: "{{}}")
-        let _ = lexer.tokenize()
+        _ = lexer.tokenize()
       }
 
       $0.it("can tokenize with new lines") {
         let templateString = """
-        My name is {%
-            if name
-             and
-            name
-        %}{{
-        name
-        }}{%
-        endif %}.
-        """
-
+          My name is {%
+              if name
+               and
+              name
+          %}{{
+          name
+          }}{%
+          endif %}.
+          """
         let lexer = Lexer(templateString: templateString)
-
         let tokens = lexer.tokenize()
 
         try expect(tokens.count) == 5
-        try expect(tokens[0]) == Token.text(value: "My name is ", at: SourceMap(location: lexer.rangeLocation(templateString.range(of: "My name is")!)))
-        try expect(tokens[1]) == Token.block(value: "if name and name", at: SourceMap(location: lexer.rangeLocation(templateString.range(of: "{%")!)))
-        try expect(tokens[2]) == Token.variable(value: "name", at: SourceMap(location: lexer.rangeLocation(templateString.range(of: "name", options: [.backwards])!)))
-        try expect(tokens[3]) == Token.block(value: "endif", at: SourceMap(location: lexer.rangeLocation(templateString.range(of: "endif")!)))
-        try expect(tokens[4]) == Token.text(value: ".", at: SourceMap(location: lexer.rangeLocation(templateString.range(of: ".")!)))
+        try expect(tokens[0]) == Token.text(value: "My name is ", at: makeSourceMap("My name is", for: lexer))
+        try expect(tokens[1]) == Token.block(value: "if name and name", at: makeSourceMap("{%", for: lexer))
+        try expect(tokens[2]) == Token.variable(value: "name", at: makeSourceMap("name", for: lexer, options: .backwards))
+        try expect(tokens[3]) == Token.block(value: "endif", at: makeSourceMap("endif", for: lexer))
+        try expect(tokens[4]) == Token.text(value: ".", at: makeSourceMap(".", for: lexer))
+      }
+
+      $0.it("can tokenize escape sequences") {
+        let templateString = "class Some {{ '{' }}{% if true %}{{ stuff }}{% endif %}"
+        let lexer = Lexer(templateString: templateString)
+        let tokens = lexer.tokenize()
+
+        try expect(tokens.count) == 5
+        try expect(tokens[0]) == Token.text(value: "class Some ", at: makeSourceMap("class Some ", for: lexer))
+        try expect(tokens[1]) == Token.variable(value: "'{'", at: makeSourceMap("'{'", for: lexer))
+        try expect(tokens[2]) == Token.block(value: "if true", at: makeSourceMap("if true", for: lexer))
+        try expect(tokens[3]) == Token.variable(value: "stuff", at: makeSourceMap("stuff", for: lexer))
+        try expect(tokens[4]) == Token.block(value: "endif", at: makeSourceMap("endif", for: lexer))
       }
     }
   }
+
+  func testPerformance() throws {
+    let path = Path(#file) + ".."  + "fixtures" + "huge.html"
+    let content: String = try path.read()
+
+    measure {
+      let lexer = Lexer(templateString: content)
+      _ = lexer.tokenize()
+    }
+  }
 }
diff --git a/Tests/StencilTests/XCTestManifests.swift b/Tests/StencilTests/XCTestManifests.swift
index 84f6cce..73cf026 100644
--- a/Tests/StencilTests/XCTestManifests.swift
+++ b/Tests/StencilTests/XCTestManifests.swift
@@ -57,6 +57,7 @@ extension InheritenceTests {
 extension LexerTests {
     static let __allTests = [
         ("testLexer", testLexer),
+        ("testPerformance", testPerformance),
     ]
 }
 
diff --git a/Tests/StencilTests/fixtures/huge.html b/Tests/StencilTests/fixtures/huge.html
new file mode 100644
index 0000000..c338ed6
--- /dev/null
+++ b/Tests/StencilTests/fixtures/huge.html
@@ -0,0 +1,1131 @@
+<!DOCTYPE html>
+<html lang="nl">
+<head>
+    <title>{% block title %}Rond De Tafel
+        {% if sort == "new" %}
+            {{ block.super }} - Nieuwste spellen
+        {% elif sort == "upcoming" %}
+            {{ block.super }} - Binnenkort op de agenda
+        {% elif sort == "near-me" %}
+            {{ block.super }} - In mijn buurt
+        {% endif %}
+    {% endblock %}</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="author" content="Steven Van Impe">
+    <meta name="description" content="Rond De Tafel brengt mensen en spellen samen. Vind spellen, zoek medespelers en maak nieuwe vrienden.">
+    <meta property="og:site_name" content="Rond De Tafel">
+    <meta property="og:type" content="website">
+    <meta property="fb:app_id" content="{{ base.facebook.app }}">
+    <meta property="og:description" content="Rond De Tafel brengt mensen en spellen samen. Vind spellen, zoek medespelers en maak nieuwe vrienden.">
+    <meta property="og:url" content="{{ base.opengraph.url }}">
+    {% block opengraph %}
+        <meta property="og:title" content="Rond De tafel">
+        <meta property="og:image" content="{{ base.opengraph.image }}">
+    {% endblock %}
+    <link href="/public/img/favicon.png" rel="icon" type="image/png">
+    <link href="/public/css/bootstrap.min.css" rel="stylesheet">
+    <link href="/public/css/font-awesome.min.css" rel="stylesheet">
+    <link href="/public/css/pikaday.min.css" rel="stylesheet">
+    <style>
+        .navbar, .btn-primary {
+            background-color: #2185D0;
+        }
+        h2, h3 {
+            margin-bottom: 1rem;
+        }
+        img.avatar {
+            width: 40px;
+            height: 40px;
+        }
+        /* Pagination, used for sort and view options. */
+        .page-link {
+            color: #2185D0;
+        }
+        .page-item.active .page-link {
+            background-color: #2185D0;
+            border-color: #2185D0;
+        }
+        /* Activity cards, used in grid view. */
+        a.card {
+            width: 100%;
+            color: inherit;
+            text-decoration: none;
+        }
+        a.card.green {
+            box-shadow: 0 1px 0 0 #21BA45;
+        }
+        a.card.yellow {
+            box-shadow: 0 1px 0 0 #FBBD08;
+        }
+        a.card.red {
+            box-shadow: 0 1px 0 0 #DB2828;
+        }
+        a.card .card-body {
+            line-height: 2em;
+        }
+        /* Activity items, used in list view. */
+        a.item {
+            display: flex;
+            color: inherit;
+            text-decoration: none;
+            border-radius: 0.25rem;
+            margin-bottom: 1rem;
+        }
+        a.item:focus, a.item:hover {
+            background-color: #f8f9fa;
+        }
+        a.item.green {
+            box-shadow: 1px 0 0 0 #21BA45;
+        }
+        a.item.yellow {
+            box-shadow: 1px 0 0 0 #FBBD08;
+        }
+        a.item.red {
+            box-shadow: 1px 0 0 0 #DB2828;
+        }
+        a.item .body {
+            display: flex;
+            flex-direction: column;
+            margin-left: 1rem;
+            line-height: 2em;
+        }
+        @media(min-width:768px) {
+            a.item.autoborder {
+                border: 1px solid rgba(0, 0, 0, 0.125);
+            }
+            a.item.autoborder .body {
+                margin-top: 0.5rem;
+            }
+        }
+        /* Conversations and messages */
+        a.conversation {
+            display: flex;
+            color: inherit;
+            text-decoration: none;
+        }
+        a.conversation .body {
+            display: flex;
+            flex-direction: column;
+            margin-left: 1rem;
+        }
+        @media(min-width:768px) {
+            .messages {
+                margin-left: 2rem;
+            }
+        }
+        /* Margins for icons */
+        .fa-calendar, .fa-clock-o, .fa-envelope, .fa-hourglass-o, .fa-map-marker, .fa-user, .fa-users {
+            margin-right: 0.25rem;
+        }
+        .fa-home {
+            margin-left: 0.25rem;
+        }
+        /* Don't use margins in input groups or buttons */
+        button > i.fa, .input-group-text > i.fa {
+            margin-right: 0;
+        }
+        .fa-facebook-official {
+            color: #29487d;
+        }
+    </style>
+    <!-- jQuery is included in head because it's used by included components in body. -->
+    <script src="/public/js/jquery.min.js"></script>
+    {% block additional-head %}{% endblock %}
+</head>
+<body>
+    <!-- Collapsed navbar -->
+    <nav class="d-md-none navbar navbar-dark">
+        <a class="navbar-brand" href="/web/home">Rond De Tafel</a>
+        <ul class="navbar-nav ml-auto mr-3">
+            {% if base.unreadMessageCount > 0 %}
+                <li class="nav-item">
+                    <a class="nav-link" href="/web/user/messages">
+                        <i class="fa fa-envelope"></i>
+                    </a>
+                </li>
+            {% endif %}
+        </ul>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarResponsive">
+            <ul class="navbar-nav">
+                <li class="nav-item">
+                    <a class="nav-link" href="/web/activities">Spellen</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="/web/host">Organiseer</a>
+                </li>
+                {% if base.user %}
+                    <li class="nav-item">
+                        <a class="nav-link" href="/web/user/activities">Mijn spellen</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="/web/user/messages">
+                            Berichten
+                            {% if base.unreadMessageCount > 0 %}
+                                ({{ base.unreadMessageCount }})
+                            {% endif %}
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="/web/user/settings">Instellingen</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="/authentication/signout">Afmelden</a>
+                    </li>
+                {% else %}
+                    <li class="nav-item">
+                        <!-- The href will be set in code -->
+                        <a class="global-signin nav-link" href="#">Aanmelden</a>
+                    </li>
+                {% endif %}
+                <li class="nav-item">
+                    <a class="nav-link" href="/web/faq">Help</a>
+                </li>
+            </ul>
+        </div>
+    </nav>
+    <!-- Full navbar -->
+    <nav class="d-none d-md-flex navbar navbar-expand navbar-dark">
+        <a class="navbar-brand" href="/web/home">Rond De Tafel</a>
+        <ul class="navbar-nav mr-auto">
+            <li class="nav-item">
+                <a class="nav-link" href="/web/activities">Spellen</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="/web/host">Organiseer</a>
+            </li>
+        </ul>
+        <ul class="navbar-nav">
+            {% if base.user %}
+                {% if base.unreadMessageCount > 0 %}
+                    <li class="nav-item">
+                        <a class="nav-link" href="/web/user/messages">
+                            <i class="fa fa-envelope"></i>
+                        </a>
+                    </li>
+                {% endif %}
+                <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
+                        {{ base.user.name }}
+                    </a>
+                    <div class="dropdown-menu dropdown-menu-right">
+                        <a class="dropdown-item" href="/web/user/activities">Mijn spellen</a>
+                        <a class="dropdown-item" href="/web/user/messages">
+                            Berichten
+                            {% if base.unreadMessageCount > 0 %}
+                                ({{ base.unreadMessageCount }})
+                            {% endif %}
+                        </a>
+                        <a class="dropdown-item" href="/web/user/settings">Instellingen</a>
+                        <a class="dropdown-item" href="/authentication/signout">Afmelden</a>
+                    </div>
+                </li>
+            {% else %}
+                <li class="nav-item">
+                    <!-- The href will be set in code -->
+                    <a class="global-signin nav-link" href="#">Aanmelden</a>
+                </li>
+            {% endif %}
+            <li class="nav-item">
+                <a class="nav-link" href="/web/faq">
+                    <i class="fa fa-question-circle fa-lg"></i>
+                </a>
+            </li>
+        </ul>
+    </nav>
+    <!-- Main content -->
+    <div class="container mt-3">
+<div class="d-flex justify-content-center">
+    <!-- Sort options -->
+    <ul class="pagination mr-md-5">
+        {% if sort == "new" %}
+            <li class="page-item active">
+                <span class="page-link">
+                    <i class="fa fa-asterisk d-none d-sm-inline"></i> Nieuw
+                </span>
+            </li>
+        {% else %}
+            <li class="page-item">
+                <a class="page-link" href="/web/activities?sort=new">
+                    <i class="fa fa-asterisk d-none d-sm-inline"></i> Nieuw
+                </a>
+            </li>
+        {% endif %}
+        {% if sort == "upcoming" %}
+            <li class="page-item active">
+                <span class="page-link">
+                    <i class="fa fa-calendar d-none d-sm-inline"></i> Binnenkort
+                </span>
+            </li>
+        {% else %}
+            <li class="page-item">
+                <a class="page-link" href="/web/activities?sort=upcoming">
+                    <i class="fa fa-calendar d-none d-sm-inline"></i> Binnenkort
+                </a>
+            </li>
+        {% endif %}
+        {% if sort == "near-me" %}
+            <li class="page-item active">
+                <span class="page-link">
+                    <i class="fa fa-map-marker d-none d-sm-inline"></i> Dichtbij
+                </span>
+            </li>
+        {% else %}
+            <li class="page-item">
+                <a class="page-link" href="/web/activities?sort=near-me">
+                    <i class="fa fa-map-marker d-none d-sm-inline"></i> Dichtbij
+                </a>
+            </li>
+        {% endif %}
+    </ul>
+    <!-- View options, only visible in md and above -->
+    <ul class="pagination d-none d-md-flex">
+        <li class="page-item">
+            <a class="page-link" href="/web/activities?view=grid">
+                <i class="fa fa-th-large"></i> Raster
+            </a>
+        </li>
+        <li class="page-item active">
+            <span class="page-link">
+                <i class="fa fa-list"></i> Lijst
+            </span>
+        </li>
+    </ul>
+</div>
+<!-- Title -->
+{% if sort == "new" %}
+    <h2>Nieuwste spellen</h2>
+{% elif sort == "upcoming" %}
+    <h2>Binnenkort op de agenda</h2>
+{% elif sort == "near-me" %}
+    <h2>In mijn buurt</h2>
+{% endif %}
+<!-- Link to user activities -->
+{% if base.user %}
+    <div class="alert alert-info">
+        Spellen die je zelf organiseert worden niet getoond op deze pagina.
+        Deze spellen zijn te vinden in je persoonlijk menu, onder <a class="alert-link" href="/web/user/activities">Mijn spellen</a>.
+    </div>
+{% endif %}
+<!-- Check if a location is set when showing activities near the user -->
+{% if sort == "near-me" and not base.user.location %}
+    <div class="alert alert-warning">
+        {% if base.user %}
+            Om deze functie te activeren moet je een adres ingeven bij <a class="alert-link" href="/web/user/settings">Instellingen</a>.
+        {% else %}
+            Om deze functie te activeren moet je eerst <a class="alert-link" href="/authentication/welcome?redirect=%2Fweb%2Factivities">aanmelden</a>.
+            Daarna kan je een adres ingeven bij <a class="alert-link" href="/web/user/settings">Instellingen</a>.
+        {% endif %}
+    </div>
+<!-- Activities -->
+{% elif activities %}
+    {% for activity in activities %}
+        <a class="{% if activity.availableSeats == 0 %} red {% elif activity.availableSeats == 1 %} yellow {% else %} green {% endif %} autoborder item"
+            href="/web/activity/{{ activity.id }}">
+            <!-- Separate image sizing for xs, sm and md -->
+            <img class="d-sm-none align-self-start" width="75" src="{{ activity.thumbnail }}">
+            <img class="d-none d-sm-flex d-md-none align-self-start" width="150" src="{{ activity.picture }}">
+            <img class="d-none d-md-flex align-self-start" width="200" src="{{ activity.picture }}">
+            <div class="body">
+                <h5>{{ activity.name }}</h5>
+                <p>
+                    <i class="fa fa-calendar"></i>
+                    <!-- xs shows abbreviated weekday -->
+                    <span class="d-sm-none">{{ activity.shortDate }}</span>
+                    <!-- sm shows the full weekday -->
+                    <span class="d-none d-sm-inline">{{ activity.longDate }}</span>
+                    <!-- md adds the time -->
+                    <span class="d-none d-md-inline">om {{ activity.time }}</span>
+                    <br>
+                    <!-- Show the time separately in xs and sm -->
+                    <span class="d-md-none">
+                        <i class="fa fa-clock-o"></i> {{ activity.time }}<br>
+                    </span>
+                    <i class="fa fa-user"></i> {{ activity.host.name }}<br>
+                    <i class="fa fa-map-marker"></i> {{ activity.location.city }}
+                    {% if base.user.location %}
+                        ({{ activity.distance }}km)
+                    {% endif %}
+                </p>
+            </div>
+        </a>
+    {% endfor %}
+<!-- Placeholder -->
+{% else %}
+    <p>Geen spellen gepland.</p>
+{% endif %}
+    </div>
+    <!-- Footer -->
+    <footer class="container py-3 text-center">
+        © 2018 - Rond De Tafel<br>
+        Like ons op <a href="https://www.facebook.com/ronddetafel.be" target="_blank">Facebook</a> <i class="fa fa-facebook-official"></i><br>
+        Broncode beschikbaar op <a href="https://github.com/svanimpe/around-the-table.git" target="_blank">GitHub</a> <i class="fa fa-github"></i>
+    </footer>
+    <!-- Scripts -->
+    <script src="/public/js/popper.min.js"></script>
+    <script src="/public/js/bootstrap.min.js"></script>
+    <script>
+        // Set the href for the sign in link.
+        var redirect = window.location.pathname;
+        $(".global-signin").attr("href", "/authentication/welcome?redirect=" + encodeURIComponent(redirect));
+    </script>
+    {% block additional-body %}{% endblock %}
+</body>
+</html>
+<!DOCTYPE html>
+<html lang="nl">
+<head>
+    <title>{% block title %}Rond De Tafel
+        {% if sort == "new" %}
+            {{ block.super }} - Nieuwste spellen
+        {% elif sort == "upcoming" %}
+            {{ block.super }} - Binnenkort op de agenda
+        {% elif sort == "near-me" %}
+            {{ block.super }} - In mijn buurt
+        {% endif %}
+    {% endblock %}</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="author" content="Steven Van Impe">
+    <meta name="description" content="Rond De Tafel brengt mensen en spellen samen. Vind spellen, zoek medespelers en maak nieuwe vrienden.">
+    <meta property="og:site_name" content="Rond De Tafel">
+    <meta property="og:type" content="website">
+    <meta property="fb:app_id" content="{{ base.facebook.app }}">
+    <meta property="og:description" content="Rond De Tafel brengt mensen en spellen samen. Vind spellen, zoek medespelers en maak nieuwe vrienden.">
+    <meta property="og:url" content="{{ base.opengraph.url }}">
+    {% block opengraph %}
+        <meta property="og:title" content="Rond De tafel">
+        <meta property="og:image" content="{{ base.opengraph.image }}">
+    {% endblock %}
+    <link href="/public/img/favicon.png" rel="icon" type="image/png">
+    <link href="/public/css/bootstrap.min.css" rel="stylesheet">
+    <link href="/public/css/font-awesome.min.css" rel="stylesheet">
+    <link href="/public/css/pikaday.min.css" rel="stylesheet">
+    <style>
+        .navbar, .btn-primary {
+            background-color: #2185D0;
+        }
+        h2, h3 {
+            margin-bottom: 1rem;
+        }
+        img.avatar {
+            width: 40px;
+            height: 40px;
+        }
+        /* Pagination, used for sort and view options. */
+        .page-link {
+            color: #2185D0;
+        }
+        .page-item.active .page-link {
+            background-color: #2185D0;
+            border-color: #2185D0;
+        }
+        /* Activity cards, used in grid view. */
+        a.card {
+            width: 100%;
+            color: inherit;
+            text-decoration: none;
+        }
+        a.card.green {
+            box-shadow: 0 1px 0 0 #21BA45;
+        }
+        a.card.yellow {
+            box-shadow: 0 1px 0 0 #FBBD08;
+        }
+        a.card.red {
+            box-shadow: 0 1px 0 0 #DB2828;
+        }
+        a.card .card-body {
+            line-height: 2em;
+        }
+        /* Activity items, used in list view. */
+        a.item {
+            display: flex;
+            color: inherit;
+            text-decoration: none;
+            border-radius: 0.25rem;
+            margin-bottom: 1rem;
+        }
+        a.item:focus, a.item:hover {
+            background-color: #f8f9fa;
+        }
+        a.item.green {
+            box-shadow: 1px 0 0 0 #21BA45;
+        }
+        a.item.yellow {
+            box-shadow: 1px 0 0 0 #FBBD08;
+        }
+        a.item.red {
+            box-shadow: 1px 0 0 0 #DB2828;
+        }
+        a.item .body {
+            display: flex;
+            flex-direction: column;
+            margin-left: 1rem;
+            line-height: 2em;
+        }
+        @media(min-width:768px) {
+            a.item.autoborder {
+                border: 1px solid rgba(0, 0, 0, 0.125);
+            }
+            a.item.autoborder .body {
+                margin-top: 0.5rem;
+            }
+        }
+        /* Conversations and messages */
+        a.conversation {
+            display: flex;
+            color: inherit;
+            text-decoration: none;
+        }
+        a.conversation .body {
+            display: flex;
+            flex-direction: column;
+            margin-left: 1rem;
+        }
+        @media(min-width:768px) {
+            .messages {
+                margin-left: 2rem;
+            }
+        }
+        /* Margins for icons */
+        .fa-calendar, .fa-clock-o, .fa-envelope, .fa-hourglass-o, .fa-map-marker, .fa-user, .fa-users {
+            margin-right: 0.25rem;
+        }
+        .fa-home {
+            margin-left: 0.25rem;
+        }
+        /* Don't use margins in input groups or buttons */
+        button > i.fa, .input-group-text > i.fa {
+            margin-right: 0;
+        }
+        .fa-facebook-official {
+            color: #29487d;
+        }
+    </style>
+    <!-- jQuery is included in head because it's used by included components in body. -->
+    <script src="/public/js/jquery.min.js"></script>
+    {% block additional-head %}{% endblock %}
+</head>
+<body>
+    <!-- Collapsed navbar -->
+    <nav class="d-md-none navbar navbar-dark">
+        <a class="navbar-brand" href="/web/home">Rond De Tafel</a>
+        <ul class="navbar-nav ml-auto mr-3">
+            {% if base.unreadMessageCount > 0 %}
+                <li class="nav-item">
+                    <a class="nav-link" href="/web/user/messages">
+                        <i class="fa fa-envelope"></i>
+                    </a>
+                </li>
+            {% endif %}
+        </ul>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarResponsive">
+            <ul class="navbar-nav">
+                <li class="nav-item">
+                    <a class="nav-link" href="/web/activities">Spellen</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="/web/host">Organiseer</a>
+                </li>
+                {% if base.user %}
+                    <li class="nav-item">
+                        <a class="nav-link" href="/web/user/activities">Mijn spellen</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="/web/user/messages">
+                            Berichten
+                            {% if base.unreadMessageCount > 0 %}
+                                ({{ base.unreadMessageCount }})
+                            {% endif %}
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="/web/user/settings">Instellingen</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="/authentication/signout">Afmelden</a>
+                    </li>
+                {% else %}
+                    <li class="nav-item">
+                        <!-- The href will be set in code -->
+                        <a class="global-signin nav-link" href="#">Aanmelden</a>
+                    </li>
+                {% endif %}
+                <li class="nav-item">
+                    <a class="nav-link" href="/web/faq">Help</a>
+                </li>
+            </ul>
+        </div>
+    </nav>
+    <!-- Full navbar -->
+    <nav class="d-none d-md-flex navbar navbar-expand navbar-dark">
+        <a class="navbar-brand" href="/web/home">Rond De Tafel</a>
+        <ul class="navbar-nav mr-auto">
+            <li class="nav-item">
+                <a class="nav-link" href="/web/activities">Spellen</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="/web/host">Organiseer</a>
+            </li>
+        </ul>
+        <ul class="navbar-nav">
+            {% if base.user %}
+                {% if base.unreadMessageCount > 0 %}
+                    <li class="nav-item">
+                        <a class="nav-link" href="/web/user/messages">
+                            <i class="fa fa-envelope"></i>
+                        </a>
+                    </li>
+                {% endif %}
+                <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
+                        {{ base.user.name }}
+                    </a>
+                    <div class="dropdown-menu dropdown-menu-right">
+                        <a class="dropdown-item" href="/web/user/activities">Mijn spellen</a>
+                        <a class="dropdown-item" href="/web/user/messages">
+                            Berichten
+                            {% if base.unreadMessageCount > 0 %}
+                                ({{ base.unreadMessageCount }})
+                            {% endif %}
+                        </a>
+                        <a class="dropdown-item" href="/web/user/settings">Instellingen</a>
+                        <a class="dropdown-item" href="/authentication/signout">Afmelden</a>
+                    </div>
+                </li>
+            {% else %}
+                <li class="nav-item">
+                    <!-- The href will be set in code -->
+                    <a class="global-signin nav-link" href="#">Aanmelden</a>
+                </li>
+            {% endif %}
+            <li class="nav-item">
+                <a class="nav-link" href="/web/faq">
+                    <i class="fa fa-question-circle fa-lg"></i>
+                </a>
+            </li>
+        </ul>
+    </nav>
+    <!-- Main content -->
+    <div class="container mt-3">
+<div class="d-flex justify-content-center">
+    <!-- Sort options -->
+    <ul class="pagination mr-md-5">
+        {% if sort == "new" %}
+            <li class="page-item active">
+                <span class="page-link">
+                    <i class="fa fa-asterisk d-none d-sm-inline"></i> Nieuw
+                </span>
+            </li>
+        {% else %}
+            <li class="page-item">
+                <a class="page-link" href="/web/activities?sort=new">
+                    <i class="fa fa-asterisk d-none d-sm-inline"></i> Nieuw
+                </a>
+            </li>
+        {% endif %}
+        {% if sort == "upcoming" %}
+            <li class="page-item active">
+                <span class="page-link">
+                    <i class="fa fa-calendar d-none d-sm-inline"></i> Binnenkort
+                </span>
+            </li>
+        {% else %}
+            <li class="page-item">
+                <a class="page-link" href="/web/activities?sort=upcoming">
+                    <i class="fa fa-calendar d-none d-sm-inline"></i> Binnenkort
+                </a>
+            </li>
+        {% endif %}
+        {% if sort == "near-me" %}
+            <li class="page-item active">
+                <span class="page-link">
+                    <i class="fa fa-map-marker d-none d-sm-inline"></i> Dichtbij
+                </span>
+            </li>
+        {% else %}
+            <li class="page-item">
+                <a class="page-link" href="/web/activities?sort=near-me">
+                    <i class="fa fa-map-marker d-none d-sm-inline"></i> Dichtbij
+                </a>
+            </li>
+        {% endif %}
+    </ul>
+    <!-- View options, only visible in md and above -->
+    <ul class="pagination d-none d-md-flex">
+        <li class="page-item">
+            <a class="page-link" href="/web/activities?view=grid">
+                <i class="fa fa-th-large"></i> Raster
+            </a>
+        </li>
+        <li class="page-item active">
+            <span class="page-link">
+                <i class="fa fa-list"></i> Lijst
+            </span>
+        </li>
+    </ul>
+</div>
+<!-- Title -->
+{% if sort == "new" %}
+    <h2>Nieuwste spellen</h2>
+{% elif sort == "upcoming" %}
+    <h2>Binnenkort op de agenda</h2>
+{% elif sort == "near-me" %}
+    <h2>In mijn buurt</h2>
+{% endif %}
+<!-- Link to user activities -->
+{% if base.user %}
+    <div class="alert alert-info">
+        Spellen die je zelf organiseert worden niet getoond op deze pagina.
+        Deze spellen zijn te vinden in je persoonlijk menu, onder <a class="alert-link" href="/web/user/activities">Mijn spellen</a>.
+    </div>
+{% endif %}
+<!-- Check if a location is set when showing activities near the user -->
+{% if sort == "near-me" and not base.user.location %}
+    <div class="alert alert-warning">
+        {% if base.user %}
+            Om deze functie te activeren moet je een adres ingeven bij <a class="alert-link" href="/web/user/settings">Instellingen</a>.
+        {% else %}
+            Om deze functie te activeren moet je eerst <a class="alert-link" href="/authentication/welcome?redirect=%2Fweb%2Factivities">aanmelden</a>.
+            Daarna kan je een adres ingeven bij <a class="alert-link" href="/web/user/settings">Instellingen</a>.
+        {% endif %}
+    </div>
+<!-- Activities -->
+{% elif activities %}
+    {% for activity in activities %}
+        <a class="{% if activity.availableSeats == 0 %} red {% elif activity.availableSeats == 1 %} yellow {% else %} green {% endif %} autoborder item"
+            href="/web/activity/{{ activity.id }}">
+            <!-- Separate image sizing for xs, sm and md -->
+            <img class="d-sm-none align-self-start" width="75" src="{{ activity.thumbnail }}">
+            <img class="d-none d-sm-flex d-md-none align-self-start" width="150" src="{{ activity.picture }}">
+            <img class="d-none d-md-flex align-self-start" width="200" src="{{ activity.picture }}">
+            <div class="body">
+                <h5>{{ activity.name }}</h5>
+                <p>
+                    <i class="fa fa-calendar"></i>
+                    <!-- xs shows abbreviated weekday -->
+                    <span class="d-sm-none">{{ activity.shortDate }}</span>
+                    <!-- sm shows the full weekday -->
+                    <span class="d-none d-sm-inline">{{ activity.longDate }}</span>
+                    <!-- md adds the time -->
+                    <span class="d-none d-md-inline">om {{ activity.time }}</span>
+                    <br>
+                    <!-- Show the time separately in xs and sm -->
+                    <span class="d-md-none">
+                        <i class="fa fa-clock-o"></i> {{ activity.time }}<br>
+                    </span>
+                    <i class="fa fa-user"></i> {{ activity.host.name }}<br>
+                    <i class="fa fa-map-marker"></i> {{ activity.location.city }}
+                    {% if base.user.location %}
+                        ({{ activity.distance }}km)
+                    {% endif %}
+                </p>
+            </div>
+        </a>
+    {% endfor %}
+<!-- Placeholder -->
+{% else %}
+    <p>Geen spellen gepland.</p>
+{% endif %}
+    </div>
+    <!-- Footer -->
+    <footer class="container py-3 text-center">
+        © 2018 - Rond De Tafel<br>
+        Like ons op <a href="https://www.facebook.com/ronddetafel.be" target="_blank">Facebook</a> <i class="fa fa-facebook-official"></i><br>
+        Broncode beschikbaar op <a href="https://github.com/svanimpe/around-the-table.git" target="_blank">GitHub</a> <i class="fa fa-github"></i>
+    </footer>
+    <!-- Scripts -->
+    <script src="/public/js/popper.min.js"></script>
+    <script src="/public/js/bootstrap.min.js"></script>
+    <script>
+        // Set the href for the sign in link.
+        var redirect = window.location.pathname;
+        $(".global-signin").attr("href", "/authentication/welcome?redirect=" + encodeURIComponent(redirect));
+    </script>
+    {% block additional-body %}{% endblock %}
+</body>
+</html>
+<!DOCTYPE html>
+<html lang="nl">
+<head>
+    <title>{% block title %}Rond De Tafel
+        {% if sort == "new" %}
+            {{ block.super }} - Nieuwste spellen
+        {% elif sort == "upcoming" %}
+            {{ block.super }} - Binnenkort op de agenda
+        {% elif sort == "near-me" %}
+            {{ block.super }} - In mijn buurt
+        {% endif %}
+    {% endblock %}</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="author" content="Steven Van Impe">
+    <meta name="description" content="Rond De Tafel brengt mensen en spellen samen. Vind spellen, zoek medespelers en maak nieuwe vrienden.">
+    <meta property="og:site_name" content="Rond De Tafel">
+    <meta property="og:type" content="website">
+    <meta property="fb:app_id" content="{{ base.facebook.app }}">
+    <meta property="og:description" content="Rond De Tafel brengt mensen en spellen samen. Vind spellen, zoek medespelers en maak nieuwe vrienden.">
+    <meta property="og:url" content="{{ base.opengraph.url }}">
+    {% block opengraph %}
+        <meta property="og:title" content="Rond De tafel">
+        <meta property="og:image" content="{{ base.opengraph.image }}">
+    {% endblock %}
+    <link href="/public/img/favicon.png" rel="icon" type="image/png">
+    <link href="/public/css/bootstrap.min.css" rel="stylesheet">
+    <link href="/public/css/font-awesome.min.css" rel="stylesheet">
+    <link href="/public/css/pikaday.min.css" rel="stylesheet">
+    <style>
+        .navbar, .btn-primary {
+            background-color: #2185D0;
+        }
+        h2, h3 {
+            margin-bottom: 1rem;
+        }
+        img.avatar {
+            width: 40px;
+            height: 40px;
+        }
+        /* Pagination, used for sort and view options. */
+        .page-link {
+            color: #2185D0;
+        }
+        .page-item.active .page-link {
+            background-color: #2185D0;
+            border-color: #2185D0;
+        }
+        /* Activity cards, used in grid view. */
+        a.card {
+            width: 100%;
+            color: inherit;
+            text-decoration: none;
+        }
+        a.card.green {
+            box-shadow: 0 1px 0 0 #21BA45;
+        }
+        a.card.yellow {
+            box-shadow: 0 1px 0 0 #FBBD08;
+        }
+        a.card.red {
+            box-shadow: 0 1px 0 0 #DB2828;
+        }
+        a.card .card-body {
+            line-height: 2em;
+        }
+        /* Activity items, used in list view. */
+        a.item {
+            display: flex;
+            color: inherit;
+            text-decoration: none;
+            border-radius: 0.25rem;
+            margin-bottom: 1rem;
+        }
+        a.item:focus, a.item:hover {
+            background-color: #f8f9fa;
+        }
+        a.item.green {
+            box-shadow: 1px 0 0 0 #21BA45;
+        }
+        a.item.yellow {
+            box-shadow: 1px 0 0 0 #FBBD08;
+        }
+        a.item.red {
+            box-shadow: 1px 0 0 0 #DB2828;
+        }
+        a.item .body {
+            display: flex;
+            flex-direction: column;
+            margin-left: 1rem;
+            line-height: 2em;
+        }
+        @media(min-width:768px) {
+            a.item.autoborder {
+                border: 1px solid rgba(0, 0, 0, 0.125);
+            }
+            a.item.autoborder .body {
+                margin-top: 0.5rem;
+            }
+        }
+        /* Conversations and messages */
+        a.conversation {
+            display: flex;
+            color: inherit;
+            text-decoration: none;
+        }
+        a.conversation .body {
+            display: flex;
+            flex-direction: column;
+            margin-left: 1rem;
+        }
+        @media(min-width:768px) {
+            .messages {
+                margin-left: 2rem;
+            }
+        }
+        /* Margins for icons */
+        .fa-calendar, .fa-clock-o, .fa-envelope, .fa-hourglass-o, .fa-map-marker, .fa-user, .fa-users {
+            margin-right: 0.25rem;
+        }
+        .fa-home {
+            margin-left: 0.25rem;
+        }
+        /* Don't use margins in input groups or buttons */
+        button > i.fa, .input-group-text > i.fa {
+            margin-right: 0;
+        }
+        .fa-facebook-official {
+            color: #29487d;
+        }
+    </style>
+    <!-- jQuery is included in head because it's used by included components in body. -->
+    <script src="/public/js/jquery.min.js"></script>
+    {% block additional-head %}{% endblock %}
+</head>
+<body>
+    <!-- Collapsed navbar -->
+    <nav class="d-md-none navbar navbar-dark">
+        <a class="navbar-brand" href="/web/home">Rond De Tafel</a>
+        <ul class="navbar-nav ml-auto mr-3">
+            {% if base.unreadMessageCount > 0 %}
+                <li class="nav-item">
+                    <a class="nav-link" href="/web/user/messages">
+                        <i class="fa fa-envelope"></i>
+                    </a>
+                </li>
+            {% endif %}
+        </ul>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarResponsive">
+            <ul class="navbar-nav">
+                <li class="nav-item">
+                    <a class="nav-link" href="/web/activities">Spellen</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="/web/host">Organiseer</a>
+                </li>
+                {% if base.user %}
+                    <li class="nav-item">
+                        <a class="nav-link" href="/web/user/activities">Mijn spellen</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="/web/user/messages">
+                            Berichten
+                            {% if base.unreadMessageCount > 0 %}
+                                ({{ base.unreadMessageCount }})
+                            {% endif %}
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="/web/user/settings">Instellingen</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="/authentication/signout">Afmelden</a>
+                    </li>
+                {% else %}
+                    <li class="nav-item">
+                        <!-- The href will be set in code -->
+                        <a class="global-signin nav-link" href="#">Aanmelden</a>
+                    </li>
+                {% endif %}
+                <li class="nav-item">
+                    <a class="nav-link" href="/web/faq">Help</a>
+                </li>
+            </ul>
+        </div>
+    </nav>
+    <!-- Full navbar -->
+    <nav class="d-none d-md-flex navbar navbar-expand navbar-dark">
+        <a class="navbar-brand" href="/web/home">Rond De Tafel</a>
+        <ul class="navbar-nav mr-auto">
+            <li class="nav-item">
+                <a class="nav-link" href="/web/activities">Spellen</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="/web/host">Organiseer</a>
+            </li>
+        </ul>
+        <ul class="navbar-nav">
+            {% if base.user %}
+                {% if base.unreadMessageCount > 0 %}
+                    <li class="nav-item">
+                        <a class="nav-link" href="/web/user/messages">
+                            <i class="fa fa-envelope"></i>
+                        </a>
+                    </li>
+                {% endif %}
+                <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
+                        {{ base.user.name }}
+                    </a>
+                    <div class="dropdown-menu dropdown-menu-right">
+                        <a class="dropdown-item" href="/web/user/activities">Mijn spellen</a>
+                        <a class="dropdown-item" href="/web/user/messages">
+                            Berichten
+                            {% if base.unreadMessageCount > 0 %}
+                                ({{ base.unreadMessageCount }})
+                            {% endif %}
+                        </a>
+                        <a class="dropdown-item" href="/web/user/settings">Instellingen</a>
+                        <a class="dropdown-item" href="/authentication/signout">Afmelden</a>
+                    </div>
+                </li>
+            {% else %}
+                <li class="nav-item">
+                    <!-- The href will be set in code -->
+                    <a class="global-signin nav-link" href="#">Aanmelden</a>
+                </li>
+            {% endif %}
+            <li class="nav-item">
+                <a class="nav-link" href="/web/faq">
+                    <i class="fa fa-question-circle fa-lg"></i>
+                </a>
+            </li>
+        </ul>
+    </nav>
+    <!-- Main content -->
+    <div class="container mt-3">
+<div class="d-flex justify-content-center">
+    <!-- Sort options -->
+    <ul class="pagination mr-md-5">
+        {% if sort == "new" %}
+            <li class="page-item active">
+                <span class="page-link">
+                    <i class="fa fa-asterisk d-none d-sm-inline"></i> Nieuw
+                </span>
+            </li>
+        {% else %}
+            <li class="page-item">
+                <a class="page-link" href="/web/activities?sort=new">
+                    <i class="fa fa-asterisk d-none d-sm-inline"></i> Nieuw
+                </a>
+            </li>
+        {% endif %}
+        {% if sort == "upcoming" %}
+            <li class="page-item active">
+                <span class="page-link">
+                    <i class="fa fa-calendar d-none d-sm-inline"></i> Binnenkort
+                </span>
+            </li>
+        {% else %}
+            <li class="page-item">
+                <a class="page-link" href="/web/activities?sort=upcoming">
+                    <i class="fa fa-calendar d-none d-sm-inline"></i> Binnenkort
+                </a>
+            </li>
+        {% endif %}
+        {% if sort == "near-me" %}
+            <li class="page-item active">
+                <span class="page-link">
+                    <i class="fa fa-map-marker d-none d-sm-inline"></i> Dichtbij
+                </span>
+            </li>
+        {% else %}
+            <li class="page-item">
+                <a class="page-link" href="/web/activities?sort=near-me">
+                    <i class="fa fa-map-marker d-none d-sm-inline"></i> Dichtbij
+                </a>
+            </li>
+        {% endif %}
+    </ul>
+    <!-- View options, only visible in md and above -->
+    <ul class="pagination d-none d-md-flex">
+        <li class="page-item">
+            <a class="page-link" href="/web/activities?view=grid">
+                <i class="fa fa-th-large"></i> Raster
+            </a>
+        </li>
+        <li class="page-item active">
+            <span class="page-link">
+                <i class="fa fa-list"></i> Lijst
+            </span>
+        </li>
+    </ul>
+</div>
+<!-- Title -->
+{% if sort == "new" %}
+    <h2>Nieuwste spellen</h2>
+{% elif sort == "upcoming" %}
+    <h2>Binnenkort op de agenda</h2>
+{% elif sort == "near-me" %}
+    <h2>In mijn buurt</h2>
+{% endif %}
+<!-- Link to user activities -->
+{% if base.user %}
+    <div class="alert alert-info">
+        Spellen die je zelf organiseert worden niet getoond op deze pagina.
+        Deze spellen zijn te vinden in je persoonlijk menu, onder <a class="alert-link" href="/web/user/activities">Mijn spellen</a>.
+    </div>
+{% endif %}
+<!-- Check if a location is set when showing activities near the user -->
+{% if sort == "near-me" and not base.user.location %}
+    <div class="alert alert-warning">
+        {% if base.user %}
+            Om deze functie te activeren moet je een adres ingeven bij <a class="alert-link" href="/web/user/settings">Instellingen</a>.
+        {% else %}
+            Om deze functie te activeren moet je eerst <a class="alert-link" href="/authentication/welcome?redirect=%2Fweb%2Factivities">aanmelden</a>.
+            Daarna kan je een adres ingeven bij <a class="alert-link" href="/web/user/settings">Instellingen</a>.
+        {% endif %}
+    </div>
+<!-- Activities -->
+{% elif activities %}
+    {% for activity in activities %}
+        <a class="{% if activity.availableSeats == 0 %} red {% elif activity.availableSeats == 1 %} yellow {% else %} green {% endif %} autoborder item"
+            href="/web/activity/{{ activity.id }}">
+            <!-- Separate image sizing for xs, sm and md -->
+            <img class="d-sm-none align-self-start" width="75" src="{{ activity.thumbnail }}">
+            <img class="d-none d-sm-flex d-md-none align-self-start" width="150" src="{{ activity.picture }}">
+            <img class="d-none d-md-flex align-self-start" width="200" src="{{ activity.picture }}">
+            <div class="body">
+                <h5>{{ activity.name }}</h5>
+                <p>
+                    <i class="fa fa-calendar"></i>
+                    <!-- xs shows abbreviated weekday -->
+                    <span class="d-sm-none">{{ activity.shortDate }}</span>
+                    <!-- sm shows the full weekday -->
+                    <span class="d-none d-sm-inline">{{ activity.longDate }}</span>
+                    <!-- md adds the time -->
+                    <span class="d-none d-md-inline">om {{ activity.time }}</span>
+                    <br>
+                    <!-- Show the time separately in xs and sm -->
+                    <span class="d-md-none">
+                        <i class="fa fa-clock-o"></i> {{ activity.time }}<br>
+                    </span>
+                    <i class="fa fa-user"></i> {{ activity.host.name }}<br>
+                    <i class="fa fa-map-marker"></i> {{ activity.location.city }}
+                    {% if base.user.location %}
+                        ({{ activity.distance }}km)
+                    {% endif %}
+                </p>
+            </div>
+        </a>
+    {% endfor %}
+<!-- Placeholder -->
+{% else %}
+    <p>Geen spellen gepland.</p>
+{% endif %}
+    </div>
+    <!-- Footer -->
+    <footer class="container py-3 text-center">
+        © 2018 - Rond De Tafel<br>
+        Like ons op <a href="https://www.facebook.com/ronddetafel.be" target="_blank">Facebook</a> <i class="fa fa-facebook-official"></i><br>
+        Broncode beschikbaar op <a href="https://github.com/svanimpe/around-the-table.git" target="_blank">GitHub</a> <i class="fa fa-github"></i>
+    </footer>
+    <!-- Scripts -->
+    <script src="/public/js/popper.min.js"></script>
+    <script src="/public/js/bootstrap.min.js"></script>
+    <script>
+        // Set the href for the sign in link.
+        var redirect = window.location.pathname;
+        $(".global-signin").attr("href", "/authentication/welcome?redirect=" + encodeURIComponent(redirect));
+    </script>
+    {% block additional-body %}{% endblock %}
+</body>
+</html>