(error = message)} /> {#if noSpaces} {:else}

This gallery goes into {group.data?.displayName ?? 'the group'}'s pool, which only its members can see. The photos stay yours, and go with you if you leave.

{#if photos.length > 0}

{#each photos as photo, i (photo.dataUrl)}

{/each}

{/if}

</Field>

{#if error}
    <p class="error">{error}</p>
  {/if}

<Button onclick={publish} disabled={!canPublish}>
    {publishing ? 'Adding…' : 'Add to the pool'}
  </Button>
</div>
{/if}

<style>
  .page {
    max-width: 600px;
    margin: 0 auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .lede {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-muted);
  }
  .thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
  .thumb { position: relative; width: 72px; height: 72px; }
  .thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
  .remove {
    position: absolute;
    top: -6px;
    right: -6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: var(--text-primary);
    color: var(--bg);
    cursor: pointer;
  }
  .error { margin: -8px 0 0; font-size: 13px; color: var(--danger); }
</style>