<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="206999" data-post-id="206999">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="fsa" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  fsa
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Just a quick note - have you tried the following:</p>
<pre><code>&lt;div&gt;
&lt;%= case @nav do %&gt;
&lt;% :post -&gt; %&gt;
  &lt;%="&lt;div&gt;Post view goes here&lt;/div&gt;" %&gt;

&lt;% :main -&gt; %&gt;
  &lt;%="&lt;div&gt;Main view goes here&lt;/div&gt;" %&gt;

&lt;% :board -&gt; %&gt;
  &lt;%="&lt;div&gt;Board view goes here&lt;/div&gt;" %&gt;

&lt;% end %&gt;
&lt;/div&gt;
</code></pre>
<p>I have done some eex for JSON, html etc… and a quick look made me think this might nudge you in the right direction…</p>
<p>p.s.<br>
It has been a while since I was doing it, and it was on elixir 1.9 just in case if that matters<br>
R.<br>
Fridrik.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="206999" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/how-to-properly-use-case-statements-in-eex-liveview/38244/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-206999" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="206999"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #11"></div>
  </section>
</div>
    <div class="postbit" id="207006" data-post-id="207006">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="benwilson512" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/benwilson512/120/1457_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  benwilson512
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>Author of Craft GraphQL APIs in Elixir with Absinthe</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>This will not work the way you want it to, it will escape the inner HTML. <code>&lt;%= "&lt;div&gt;&lt;/div&gt;" %&gt;</code> shouldn’t be necessary, it should be possible to just <code>&lt;div&gt;&lt;/div&gt;</code>. I think <a class="mention" href="/u/tschnibo" rel="nofollow">@tschnibo</a> is on to something, my guess is that <a class="mention" href="/u/apb9785" rel="nofollow">@APB9785</a>’s code is doing <code>do%&gt;</code></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="207006" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/how-to-properly-use-case-statements-in-eex-liveview/38244/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-207006" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="207006"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #12"></div>
  </section>
</div>
    <div class="postbit" id="207041" data-post-id="207041">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="APB9785" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/APB9785/120/24101_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  APB9785
                      <span class="op-star" title="Thread Starter">
                        <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                      </span>
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>Creator of ECSx</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Sure!  Here’s a link to the page_live.html.leex I’m running when I get the error:</p>
<aside class="onebox githubgist" data-onebox-src="https://gist.github.com/APB9785/8b7334cf04e6dab3fe90ce75c04ac220">
  <header class="source">

      <a href="https://gist.github.com/APB9785/8b7334cf04e6dab3fe90ce75c04ac220" target="_blank" rel="noopener nofollow ugc">gist.github.com</a>
  </header>

  <article class="onebox-body">
    <h4><a href="https://gist.github.com/APB9785/8b7334cf04e6dab3fe90ce75c04ac220" target="_blank" rel="noopener nofollow ugc">https://gist.github.com/APB9785/8b7334cf04e6dab3fe90ce75c04ac220</a></h4>



  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>

<p>The full error for this file is</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">== Compilation error in file lib/phx_bb_web/live/page_live.ex ==
** (SyntaxError) lib/phx_bb_web/live/page_live.html.leex:11: unexpected operator -&gt;. If you want to define multiple clauses, the first expression must use -&gt;. Syntax error before: '-&gt;'
    (eex 1.11.3) lib/eex/compiler.ex:126: EEx.Compiler.generate_buffer/4
    (eex 1.11.3) lib/eex/compiler.ex:65: EEx.Compiler.generate_buffer/4
    (phoenix_live_view 0.15.4) expanding macro: Phoenix.LiveView.Renderer.__before_compile__/1
    lib/phx_bb_web/live/page_live.ex:1: PhxBbWeb.PageLive (module)
    (elixir 1.11.3) lib/kernel/parallel_compiler.ex:314: anonymous fn/4 in Kernel.ParallelCompiler.spawn_workers/7
</code></pre> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="207041" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/how-to-properly-use-case-statements-in-eex-liveview/38244/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-207041" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="207041"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #13"></div>
  </section>
</div>
    <div class="postbit" id="207044" data-post-id="207044">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="patrickdm" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/patrickdm/120/7579_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  patrickdm
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group quote-modified" data-username="APB9785" data-post="14" data-topic="38244">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/apb9785/48/24101_2.png" class="avatar"> APB9785:</div>
<blockquote>
<p><code>  &lt;!-- ####################   POST VIEW   #################### --&gt;</code></p>
</blockquote>
</aside>
<p>Just a guess but… did you try without this html comment?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="207044" data-batch-url="/posts/batch_likers">
                        6
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/how-to-properly-use-case-statements-in-eex-liveview/38244/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-207044" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="207044"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-most-liked cat-most-liked" title="One of the top 3 liked posts in this thread!"></div>
  </section>
</div>
    <div class="postbit" id="207046" data-post-id="207046">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="APB9785" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/APB9785/120/24101_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  APB9785
                      <span class="op-star" title="Thread Starter">
                        <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                      </span>
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>Creator of ECSx</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>You know, I thought I had tried that already, but I guess not, because you’re totally right.  The case statement must expect the first pattern to come immediately, and the comment beforehand was breaking syntax.</p>
<p>In the previous version, I was using nested if-else statements for this navigation switch, and the comments weren’t bothering anything.  But now I see that in a case statement, the comments must come AFTER the pattern clause to match.</p>
<p>Thanks so much for taking the time to help!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="207046" data-batch-url="/posts/batch_likers">
                        3
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/how-to-properly-use-case-statements-in-eex-liveview/38244/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-207046" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="207046"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #15"></div>
  </section>
</div>
    <div class="postbit" id="207135" data-post-id="207135">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="the_wildgoose" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  the_wildgoose
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Totally unrelated to your question, but…</p>
<p>…Try “Surface”!  It changed my life!  <img src="https://forum.elixirforum.com/images/emoji/apple/smile.png?v=15" title=":smile:" class="emoji" alt=":smile:" loading="lazy" width="20" height="20"></p>
<p>You can take each of those big groups of HTML, slap them in a “component” and then you insert something like a “fake html” tag into the code. The tag gets inflated into the contents of the component.</p>
<p>Now at this point you are correct in pointing out this is no different to using a partial. However, the syntax is similar to adding new HTML tags, so this also implies that the content of the tag gets passed in kind of like a param into the partial function.</p>
<p>I use it by creating a component say “BoilerPlate”, which is the outline of the form, it only contains components like “SideBar”, “TopNav” and “Content”. These inflate to their own components and so on. Content will be the wrapped content, which in your case will be one of several components, decided by the results of the case statement.</p>
<p>I’m then creating a folder with the same name as the component and further break that main content down into a small enough number of pieces that it’s understandable. I really like it!</p>
<aside class="quote" data-post="96" data-topic="27671">
  <div class="title">
    <div class="quote-controls"></div>
    <img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/gangstead/48/20511_2.png" class="avatar">
    <div class="quote-title__text-content">
      <a href="https://forum.elixirforum.com/t/surface-a-component-based-library-for-phoenix-liveview/27671/96" rel="nofollow">Surface - A component-based library for Phoenix LiveView</a> <a class="badge-category__wrapper " href="/c/news/announcing/159" rel="nofollow"><span data-category-id="159" style="--category-badge-color: #d2407f; --category-badge-text-color: #FFFFFF; --parent-category-badge-color: #d2407f;" data-parent-category-id="158" data-drop-close="true" class="badge-category --style-square --has-parent"><span class="badge-category__name">Announcing</span></span></a>
    </div>
  </div>
  <blockquote>
    I was trying to use the built in flash, but couldn’t figure out a way, so I just renamed it and wrapped around my existing utility class: 
  # in surface component
  prop message, :map

  def render(assigns) do
    ~H"""
    {{ Helpers.render_flash(@message) }}
    """
  end

# used in parent component
&lt;Flash message={{ @flash }} /&gt;
  </blockquote>
</aside>
 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="207135" data-batch-url="/posts/batch_likers">
                        2
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/how-to-properly-use-case-statements-in-eex-liveview/38244/17">Post #16</a>
	                </div>
	            </div>
              <div id="likers-container-207135" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="207135"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-last-post cat-last-post" title="Last post!"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <span class="all-loaded">— All posts loaded —</span>
</div></template></turbo-stream>