<!doctype html>
<html lang="en">
%
  TITLE_PATH="./template_data/title.txt"
  readarray -t FEDIZINE_TITLE < ${TITLE_PATH}
%
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title><% ${FEDIZINE_TITLE[0]} %></title>
  <style>
    body { font-family: sans-serif; margin: 2em auto; max-width: 700px; line-height: 1.6; background: #fafafa; color: #222; }
    h1 { font-size: 2.5em; margin-bottom: 0.2em; color: #6b46c1; }
    h2 { margin-top: 1.5em; color: #444; border-bottom: 2px solid #ddd; padding-bottom: 0.3em; }
    p, li { font-size: 1em; }
    ul { margin-top: 0.5em; }
    a { color: #6b46c1; text-decoration: none; }
    a:hover { text-decoration: underline; }
    div.highlight { background: #fef3c7; padding: 0.2em 0.4em; border-radius: 4px; }
    div.blur { filter: blur(5px); -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px);}
  </style>
</head>
<body>
  <h1><% ${FEDIZINE_TITLE[1]} %></h1>
  <p><% ${FEDIZINE_TITLE[2]} %></p>

  <h2>This month submissions</h2>
  %
    CONTESTANT_DIR="./template_data/contestants"
    CONTESTANT_DIRECTORY="./template_data/contestants/*"
    if [ "$(ls -A $CONTESTANT_DIR)" ]; then
    for CONTESTANT in $CONTESTANT_DIRECTORY
    do
  %
  <div class="contestant-box">
    %
      CONTESTANT_BIO="${CONTESTANT}/bio.txt"
      readarray -t CONTESTANT_DATA < ${CONTESTANT_BIO}
    %
    <div class="contestant-entry">
      <h3><% ${CONTESTANT_DATA[0]} %><h3>
      <small><% ${CONTESTANT_DATA[1]} %></small>
      <div class="contestant-images">
    %
      CONTESTANT_WHOLESOME_DIR="${CONTESTANT}/wholesome"
      CONTESTANT_WHOLESOME_PATH="${CONTESTANT}/wholesome/*"
      if [ -d "$CONTESTANT_WHOLESOME_DIR" ]; then
        if [ "$(ls -A $CONTESTANT_WHOLESOME_DIR)" ]; then
          for WHOLESOME_IMAGE in $CONTESTANT_WHOLESOME_PATH
          do
    %
        <div class="contestant-image">
          <img src="<% $WHOLESOME_IMAGE %>"  width="300" />
        </div>
    %
          done
        fi
      fi
    %
      </div>
      <div class="contestant-images">
    %
      CONTESTANT_LEWD_DIR="${CONTESTANT}/lewd"
      CONTESTANT_LEWD_PATH="${CONTESTANT}/lewd/*"
      if [ -d "$CONTESTANT_LEWD_DIR" ]; then
        if [ "$(ls -A $CONTESTANT_LEWD_DIR)" ]; then
          for LEWD_IMAGE in $CONTESTANT_LEWD_PATH
          do
    %
        <div class="contestant-image blur lewd" onclick="lewdify(this)">
          <img src="<% $LEWD_IMAGE %>" width="300" />
        </div>
    %
          done;
        fi
      fi
    %
      </div>
    </div>
  </div>
  %
    done;
    fi
  %

  <h2>Contact</h2>
  <p>Email: <a href="mailto:waifuism@tutanota.com">waifuism@tutanota.com</a><br>
  Misskey: <a href="https://mai.waifuism.life/@waifu">@waifu@mai.waifuism.life</a></p>

<script>
  function lewdify(source)
  {
    console.log("lewded!")
    source.classList.toggle("blur");
  }
</script>
</body>
</html>
