[hideprofile][html]<style>
  #cos-char-list {
    width: calc(100% - 2px);
  }

  #cos-char-filters {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
  }

  #cos-char-filters #cos-char-main-filters button[type=button] {
    border: 0 !important;
    background: transparent !important;
    border-radius: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1em;
    text-transform: lowercase;
    cursor: pointer;
    transition: all 0.3s linear 0s;
  }

  #cos-char-filters #cos-char-main-filters button[type=button]::after {
    display: block;
    content: attr(title);
    font-weight: 600;
    height: 1px;
    color: transparent;
    overflow: hidden;
    visibility: hidden;
  }

  #cos-char-filters #cos-char-main-filters button[type=button]:hover {
    color: var(--text) !important;
  }

  #cos-char-filters #cos-char-main-filters button[type=button]:not(:last-child) {
    border-right: 1px solid !important;
  }

  button[type=button].cos-main-filter-selected {
    font-weight: 600;
  }

  @media only screen and (max-width: 540px) {
    #cos-char-filters {
      display: block;
    }

    #cos-char-filters select {
      width: calc(100% - 2px);
      margin-bottom: 8px;
    }
  }

  .cos-char-fandom {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 16px 16px 16px;
    margin-bottom: 16px;
  }

  .cos-char-fandom__heading {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--cat);
    margin: 0 -16px 16px -16px;
    position: relative;
    border-radius: 8px 8px 0 0;
  }

  .cos-char-fandom__heading span {
    font-family: Noto Serif, Verdana;
    font-size: 20px !important;
    font-weight: 300;
    letter-spacing: 2px;
    word-spacing: 4px;
    color: rgba(201, 201, 201, 0.83);
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: calc(100% - 45px);
    display: inline-block;
  }

  .cos-char-fandom__heading .cos-char-fandom-info-trigger {
    border-radius: 50%;
    background: transparent;
    float: right;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0;
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    border: solid 1px var(--line);
    cursor: pointer;
  }

  .cos-char-fandom__heading .cos-char-fandom-info-trigger:before {
    content: '\f129';
    font-family: FontAwesome;
    font-size: 14px;
    color: rgba(201, 201, 201, 0.83);
  }

  .cos-char-fandom-info-check {
    display: none;
  }

  .cos-char-fandom-info-container {
    display: none;
    position: absolute;
    top: 0;
    right: 52px;
    width: 70%;
    background-color: var(--forum_h);
    border-radius: 8px;
    z-index: 100;
    padding: 16px;
    box-sizing: border-box;
    box-shadow: 0 6px 17px 5px rgba(0, 0, 0, 0.30);
  }

  .cos-char-fandom-info-container:before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 0 8px 10px;
    border-color: transparent transparent transparent var(--forum_h);
    position: absolute;
    right: -9.5px;
    top: 20px;
  }

  .cos-char-fandom-info-check:checked+.cos-char-fandom-info-container {
    display: block;
  }

  .cos-char-fandom-info-container p {
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 8px !important;
    font-weight: normal;
    background-color: var(--body);
  }

  .cos-fandom-link {
    float: right;
    margin-top: 16px;
  }

  @media only screen and (max-width: 540px) {
    .cos-char-fandom__heading span {
      font-size: 16px !important;
    }

    .cos-char-fandom__heading .cos-char-fandom-info-trigger {
      margin-top: -5px;
    }

    .cos-char-fandom-info-container {
      width: calc(100% - 51px);
      top: -17px;
      box-shadow: 15px 12px 15px -1px rgba(0, 0, 0, 0.25);
      padding: 16px 8px;
    }

    .cos-char-fandom-info-container:before {
      top: 31px;
    }
  }

  .cos-char-fandom__chars {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  @media only screen and (max-width: 540px) {
    .cos-char-fandom__chars {
      gap: 8px;
      grid-template-columns: 1fr;
    }
  }

  .cos-char {
    background: var(--forum_h);
    border-radius: 4px;
    border: 1px solid 1px var(--line);
    color: var(--text);
    padding: 8px;
    text-transform: lowercase;
    overflow: hidden;
  }

  .cos-char-name-stat {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 4px;
  }

  .cos-char__status {
    background-color: green;
    color: white;
    padding: 4px;
    font-size: 12px;
    margin-top: -8px;
    margin-right: -8px;
    border-radius: 4px;
  }

  .cos-char__status__taken {
    background-color: maroon;
  }

  .cos-char__status__want-to-see {
    background-color: navy;
  }

  .cos-char__name {
    font-family: "Noto Serif", Verdana;
    font-size: 18px;
    text-decoration: overline !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-x: hidden;
    display: inline-block;
    line-height: 1.7em;
  }

  .cos-char__prot {
    font-size: 10px;
  }
</style>

<div>
  <div id="cos-char-filters">
    <div id="cos-char-main-filters"></div>
  </div>
  <div id="cos-char-list"></div>
</div>

<template id="cos-char-template">
  <div class="cos-char">
    <div class="cos-char-name-stat">
      <a href="" class="cos-char__name"></a>
      <div class="cos-char__status"></div>
    </div>
    <div class="cos-char__prot"></div>
  </div>
</template>

<script>
  // var charList = [
  //   {
  //     name: 'Greek Mythology',
  //     description: 'ты бог @ иногда с братками вы спускаетесь почилить на Землю @ наступает 2019 год и во времени очередной попойки из человеческого ружья подстреливают богиню @ все в ахуе, даже Зевс в ахуе @ внезапно <s>не-а</s> приплывает Посейдон и обвиняет во всем Зевса @ внезапно <s>ДА!</s> Посейдон рассказывают, что люди – причина, по которой стало возможно ранить бога <img src="https://i.imgur.com/OImZ2cn.gif" alt="">',
  //     link: 'http://cosmogony.rusff.me/viewtopic.php?id=10#p55',
  //     characters: [
  //       {
  //         name: 'Гадес',
  //         prototype: 'Jon Hamm; Keanu Reeves',
  //         status: 'Нужен',
  //         link: 'http://cosmogony.rusff.me/viewtopic.php?id=21#p130'
  //       },
  //       {
  //         name: 'Афродита',
  //         prototype: '<abbr title="young">Sophia Lillis</abbr>; Rachelle Marie Lefèvre',
  //         status: 'Занята',
  //         link: 'http://cosmogony.rusff.me/viewtopic.php?id=51#p101'
  //       }
  //     ]
  //   },
  //   {
  //     name: 'Harry Potter. I generation',
  //     description: 'Hello world',
  //     link: '#',
  //     characters: [
  //       {
  //         name: 'Элис Лoнгботтом',
  //         prototype: 'Rosamund Pike',
  //         status: 'Занята',
  //         link: 'http://cosmogony.rusff.me/viewtopic.php?id=47#p72'
  //       }
  //     ]
  //   },
  // ];

  $.ajax({
    async: false,
    url: document.referrer + "api.php",
    data: {
      method: "storage.get",
      app_id: 1,
      key: "charList"
    },
    success: function (result) {
      var response = result.response && result.response.storage && result.response.storage.data && result.response.storage.data.charList;

      if (response) {
        var charList = JSON.parse(response);

        var filters = [
          {
            name: 'Все',
            id: 'all',
            filterFunction: null
          },
          {
            name: 'Только нужные',
            id: 'wanted',
            allowedValues: ['Нужна', 'Нужен', 'Нужно', 'Хотим видеть']
          },
          {
            name: 'Только занятые',
            id: 'present',
            allowedValues: ['Занята', 'Занят', 'Занято']
          },
        ];

        var sortedFandoms = charList.sort(function (fandom1, fandom2) {
          return fandom1.name.localeCompare(fandom2.name);
        });
        sortedFandoms.forEach(function (fandom) {
          fandom.characters = fandom.characters.sort(function (character1, character2) {
            return character1.name.localeCompare(character2.name);
          });
        });

        var sortedFandomNames = sortedFandoms.map(function (fandom) {
          return fandom.name;
        });

        var filtersEl = document.getElementById('cos-char-filters');
        var mainFilterEl = document.getElementById('cos-char-main-filters');
        var charListEl = document.getElementById('cos-char-list');
        var template = document.getElementById('cos-char-template');
        var currentFilter;
        var currentlyShowing = sortedFandoms;

        function renderList(fandomList) {
          charListEl.innerHTML = '';

          fandomList.forEach(function (fandom, index) {
            var fandomName = fandom.name;
            var fandomCharacters = fandom.characters;

            if (fandomCharacters.length > 0) {
              var fandomEl = document.createElement('div');
              fandomEl.classList.add('cos-char-fandom');
              var infoButton = '<label class="cos-char-fandom-info-trigger" title="Расскажи-ка поподробнее" for="fandom-info-' + index + '"></label><input type="checkbox" class="cos-char-fandom-info-check" name="fandom-info" id="fandom-info-' + index + '" /><div class="cos-char-fandom-info-container"><p>' + fandom.description + '</p><a href="' + fandom.link + '" class="cos-fandom-link">Дальше - больше</a></div>';
              fandomEl.innerHTML = '<h3 class="cos-char-fandom__heading"><span>' + fandomName + '</span>' + infoButton + '</h3>';

              fandomEl
                .querySelector('.cos-char-fandom-info-trigger')
                .addEventListener('mousedown', function () {
                  var checkedInfoTriggerEl = document.querySelector('.cos-char-fandom-info-check:checked');

                  if (checkedInfoTriggerEl) {
                    var checkedInfoLabelEl = checkedInfoTriggerEl.previousSibling;

                    if (checkedInfoLabelEl !== this) {
                      checkedInfoTriggerEl.checked = false;
                    }
                  }
                });

              fandomEl
                .querySelector('.cos-char-fandom-info-container')
                .addEventListener('click', function (event) {
                  event.stopPropagation();
                });

              var fandomCharsEl = document.createElement('div');
              fandomCharsEl.classList.add('cos-char-fandom__chars');

              fandomCharacters.forEach(function (character) {
                var charEl = template.content.cloneNode(true);

                var statusEl = charEl.querySelector('.cos-char__status');
                statusEl.innerHTML = character.status;
                if (character.status.includes('Занят')) {
                  statusEl.classList.add('cos-char__status__taken');
                }
                if (character.status.includes('Хотим видеть')) {
                  statusEl.classList.add('cos-char__status__want-to-see');
                }

                var nameEl = charEl.querySelector('.cos-char__name');
                nameEl.classList.add('tooltip');
                nameEl.href = character.link;
                nameEl.innerHTML = character.name;
                nameEl.title = character.description || '';

                var prototypeEl = charEl.querySelector('.cos-char__prot');
                prototypeEl.innerHTML = 'Прототип: ' + character.prototype;

                fandomCharsEl.append(charEl);
              });

              fandomEl.append(fandomCharsEl);
              charListEl.append(fandomEl);
            }
          });

        };

        function updateSelectedFilter(newSelectedFilter) {
          if (currentFilter !== newSelectedFilter) {

            var currentSelectedFilterEl = document.getElementById('cos-main-filter-' + currentFilter);
            var newSelectedFilterEl = document.getElementById('cos-main-filter-' + newSelectedFilter);

            if (currentSelectedFilterEl) {
              currentSelectedFilterEl.classList.remove('cos-main-filter-selected');
            }

            if (newSelectedFilterEl) {
              newSelectedFilterEl.classList.add('cos-main-filter-selected');
            }

            currentFilter = newSelectedFilter;
          }
        }

        function renderFandomFilter() {
          var fandomOptionsEls = sortedFandomNames.map(function (fandomName) {
            return '<option value="' + fandomName + '">' + fandomName + '</option>';
          });

          var fandomsSelectEl = document.createElement('select');
          fandomsSelectEl.innerHTML = '<option value="all-fandoms">Все фандомы</option>' + fandomOptionsEls.join('\n');

          filtersEl.prepend(fandomsSelectEl);

          fandomsSelectEl.addEventListener('change', function () {
            var selectedFandomName = this.value;

            var selectedFandomsList = sortedFandoms;
            if (selectedFandomName !== 'all-fandoms') {
              selectedFandomsList = sortedFandoms.filter(function (fandom) {
                return fandom.name === selectedFandomName;
              });
            }

            currentlyShowing = selectedFandomsList;
            if (selectedFandomsList.length > 0) {
              updateSelectedFilter('all');
              renderList(selectedFandomsList);
            }
          })
        };

        function renderMainFilters() {
          filters.forEach(function (filter) {
            var filterButtonEl = document.createElement('button');
            filterButtonEl.type = 'button';
            filterButtonEl.innerHTML = filter.name;
            filterButtonEl.title = filter.name;
            filterButtonEl.name = filter.id;
            filterButtonEl.id = 'cos-main-filter-' + filter.id;

            mainFilterEl.append(filterButtonEl);

            var allowedValues = filter.allowedValues;
            filterButtonEl.addEventListener('click', function () {
              if (currentFilter === filter.id) {
                return;
              }

              var filteredFandoms = currentlyShowing;
              if (allowedValues) {
                filteredFandoms = filteredFandoms.map(function (fandom) {
                  var fandomCopy = Object.create(fandom);
                  fandomCopy.characters = fandomCopy.characters.filter(function (character) {
                    return allowedValues.includes(character.status);
                  });
                  return fandomCopy;
                });
              }

              updateSelectedFilter(filter.id);
              renderList(filteredFandoms);
            });
          });
        };

        renderFandomFilter();
        renderMainFilters();
        updateSelectedFilter(filters[0].id);
        renderList(currentlyShowing);

        document.addEventListener('click', function (event) {
          if (event.target.className !== 'cos-char-fandom-info-trigger' && event.target.className !== 'cos-char-fandom-info-check') {
            var selectedFandomInfoTriggerEl = document.querySelector('.cos-char-fandom-info-check:checked');

            if (selectedFandomInfoTriggerEl) {
              selectedFandomInfoTriggerEl.checked = false;
            }
          }
        })
      }
    },
    error: function () {
      $.jGrowl("Список пользователей не прогрузился, попробуй еще раз.");
    }
  });
</script>[/html]