implement torrent locales form #11

public/asset/default/css/common.css

@@ -3,6 +3,18 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  outline: none;
+}
+
+:focus,
+:focus-within,
+:focus-visible,
+:active,
+:target,
+:hover {
+  opacity: 1;
+  transition: opacity .2s ease-in-out;
+
 }
 
 body {
@@ -20,11 +32,6 @@ a:active {
   opacity: .9;
 }
 
-a:hover {
-  opacity: 1;
-  transition: opacity .5s ease-in-out;
-}
-
 h1, h2, h3, h4, h5 {
   display: inline-block;
   font-weight: normal;
@@ -39,15 +46,8 @@ h2 {
   font-size: 16px;
 }
 
-a h2,
-a:visited h2,
-a:active h2 {
-  /* @TODO doubts
-  color: #a4d4ff;
-  */
-}
-
 input,
+button,
 select,
 textarea {
   accent-color: #65916d;
@@ -56,18 +56,19 @@ textarea {
   color: #ccc;
   border-radius: 3px;
   padding: 8px;
+  opacity: .96;
 }
 
 textarea:focus,
 input:focus {
   border: #65916d 1px solid;
-  outline: none;
   color: #fff;
 }
 
 select[multiple="multiple"] > option {
   border-top: 1px #5d627d solid;
   border-bottom: 1px #5d627d solid;
+  color: #fff;
 }
 
 select[multiple="multiple"] > option:active,
@@ -77,34 +78,41 @@ select[multiple="multiple"] > option:checked {
   border-top: 1px #65916d solid;
   border-bottom: 1px #65916d solid;
   background: linear-gradient(#65916d, #65916d);
-  outline: none;
-  color: #fff;
 }
 
+button,
+input[type="submit"] {
+  cursor: pointer;
+}
+
+/*
+button,
+input[type="submit"] {
+  cursor: pointer;
+  background: #65916d;
+  border-radius: 3px;
+  padding: 8px;
+  color: #fff
+}
+*/
+
 textarea,
 select[multiple="multiple"] {
   min-height: 180px;
 }
 
+
 textarea::placeholder,
 input::placeholder {
   color: #9698a5;
   opacity: 1;
 }
 
-input:hover,
+input[type="text"]:hover,
 textarea:hover {
   background: #636884;
 }
 
-input[type="submit"] {
-  cursor: pointer;
-}
-
-ul {
-  list-style: none;
-}
-
 td {
   padding: 2px 0;
 }
@@ -117,16 +125,3 @@ header a.logo {
 header a.logo > span {
   color: #96d9a1;
 }
-
-a.button,
-a.button:visited,
-a.button:active,
-a.button:hover,
-.button {
-  background: #5d627d;
-  color: #ccc;
-  border: 0;
-  border-radius: 3px;
-  padding: 6px 8px;
-  font-size: 13px;
-}

public/asset/default/css/framework.css

@@ -188,6 +188,10 @@ a.label-green:hover {
   background-color: #34384f;
 }
 
+.background-color-night-light {
+  background-color: #3d4159;
+}
+
 .background-color-green {
   background-color: #65916d;
 }
@@ -325,6 +329,11 @@ a:visited.background-color-hover-night-light:hover {
   padding: 24px;
 }
 
+.padding-x-24-px {
+  padding-left: 24px;
+  padding-right: 24px;
+}
+
 .margin-l-4-px {
   margin-left: 4px;
 }

src/Controller/TorrentController.php

@@ -11,16 +11,15 @@ use Symfony\Component\HttpFoundation\Request;
 
 use App\Service\UserService;
 use App\Service\TorrentService;
-use App\Service\TimeService;
 
 class TorrentController extends AbstractController
 {
     #[Route(
-        '/{_locale}/torrent/{id}',
+        '/{_locale}/torrent/{torrentId}',
         name: 'torrent_info',
         requirements:
         [
-            'id' => '\d+'
+            'torrentId' => '\d+'
         ],
         methods:
         [
@@ -32,7 +31,6 @@ class TorrentController extends AbstractController
         TranslatorInterface $translator,
         UserService $userService,
         TorrentService $torrentService,
-        TimeService $timeService
     ): Response
     {
         // Init user
@@ -41,7 +39,7 @@ class TorrentController extends AbstractController
         );
 
         // Init torrent
-        if (!$torrent = $torrentService->getTorrent($request->get('id')))
+        if (!$torrent = $torrentService->getTorrent($request->get('torrentId')))
         {
             throw $this->createNotFoundException();
         }
@@ -62,18 +60,18 @@ class TorrentController extends AbstractController
         }
 
         /*
-        if (!$torrent = $torrentService->getTorrentLocales($request->get('id')))
+        if (!$torrent = $torrentService->getTorrentLocales($request->get('torrentId')))
         {
             throw $this->createNotFoundException();
         }
         */
-//print_r($file->getFileTree());exit;
+
         return $this->render('default/torrent/info.html.twig', [
             'torrent' =>
             [
                 'id'      => $torrent->getId(),
                 'added'   => 0, // @TODO
-                'locales' => [], //$torrent->getLocales(),
+                'locales' => $torrentService->findLastTorrentLocales($torrent->getId()),
                 'pages'   => []
             ],
             'file' =>
@@ -101,6 +99,184 @@ class TorrentController extends AbstractController
         ]);
     }
 
+    #[Route(
+        '/{_locale}/torrent/{torrentId}/edit/locales/{torrentLocalesId}',
+        name: 'torrent_edit_locales',
+        requirements:
+        [
+            'torrentId'        => '\d+',
+            'torrentLocalesId' => '\d+',
+        ],
+        defaults:
+        [
+            'torrentLocalesId' => null,
+        ],
+        methods:
+        [
+            'GET',
+            'POST'
+        ]
+    )]
+
+    public function editLocales(
+        Request $request,
+        TranslatorInterface $translator,
+        UserService $userService,
+        TorrentService $torrentService
+    ): Response
+    {
+        // Init user
+        $user = $userService->init(
+            $request->getClientIp()
+        );
+
+        if (!$user->isStatus())
+        {
+            // @TODO
+            throw new \Exception(
+                $translator->trans('Access denied')
+            );
+        }
+
+        // Init torrent
+        if (!$torrent = $torrentService->getTorrent($request->get('torrentId')))
+        {
+            throw $this->createNotFoundException();
+        }
+
+        // Init torrent locales
+        $torrentLocalesValue = [];
+
+        // Get from edition version requested
+        if ($request->get('torrentLocalesId'))
+        {
+            if ($torrentLocales = $torrentService->getTorrentLocales($request->get('torrentLocalesId')))
+            {
+                foreach ($torrentLocales->getValue() as $value)
+                {
+                    $torrentLocalesValue[] = $value;
+                }
+            }
+
+            else
+            {
+                throw $this->createNotFoundException();
+            }
+        }
+
+        // Otherwise, get latest available
+        else
+        {
+            if ($torrentLocales = $torrentService->findLastTorrentLocales($torrent->getId()))
+            {
+                foreach ($torrentLocales->getValue() as $value)
+                {
+                    $torrentLocalesValue[] = $value;
+                }
+
+                // Update active locale
+                $request->attributes->set('torrentLocalesId', $torrentLocales->getId());
+            }
+
+            else
+            {
+                $torrentLocalesValue[] = $request->get('_locale');
+            }
+        }
+
+        // Init edition history
+        $editions = [];
+        foreach ($torrentService->findTorrentLocales($torrent->getId()) as $torrentLocales)
+        {
+            $editions[] =
+            [
+                'id'       => $torrentLocales->getId(),
+                'added'    => $torrentLocales->getAdded(),
+                'approved' => $torrentLocales->isApproved(),
+                'active'   => $torrentLocales->getId() == $request->get('torrentLocalesId'),
+                'user'     =>
+                [
+                    'id' => $torrentLocales->getUserId(),
+                    'identicon' => $userService->identicon(
+                        $userService->get(
+                            $torrentLocales->getUserId()
+                        )->getAddress()
+                    ),
+                ]
+            ];
+        }
+
+        // Init form
+        $form =
+        [
+            'locales' =>
+            [
+                'error'     => [],
+                'attribute' =>
+                [
+                    'value'       => $request->get('locales') ? $request->get('locales') : $torrentLocalesValue,
+                    'placeholder' => $translator->trans('Content language')
+                ]
+            ]
+        ];
+
+        // Process request
+        if ($request->isMethod('post'))
+        {
+            /// Locales
+            $locales = [];
+            if ($request->get('locales'))
+            {
+                foreach ((array) $request->get('locales') as $locale)
+                {
+                    if (in_array($locale, explode('|', $this->getParameter('app.locales'))))
+                    {
+                        $locales[] = $locale;
+                    }
+                }
+            }
+
+            //// At least one valid locale required
+            if (!$locales)
+            {
+                $form['locales']['error'][] = $translator->trans('At least one locale required');
+            }
+
+            // Request is valid
+            if (empty($form['locales']['error']))
+            {
+                // Save data
+                $torrentService->addTorrentLocales(
+                    $torrent->getId(),
+                    $user->getId(),
+                    time(),
+                    $locales,
+                    $user->isApproved()
+                );
+
+                // Redirect to info page created
+                return $this->redirectToRoute(
+                    'torrent_info',
+                    [
+                        '_locale'   => $request->get('_locale'),
+                        'torrentId' => $torrent->getId()
+                    ]
+                );
+            }
+        }
+
+        // Render form template
+        return $this->render(
+            'default/torrent/edit/locales.html.twig',
+            [
+                'torrentId'        => $torrent->getId(),
+                'locales'          => explode('|', $this->getParameter('app.locales')),
+                'editions'         => $editions,
+                'form'             => $form,
+            ]
+        );
+    }
+
     #[Route(
         '/{_locale}/submit/torrent',
         name: 'torrent_submit',
@@ -208,7 +384,7 @@ class TorrentController extends AbstractController
             if (empty($form['torrent']['error']) && empty($form['locales']['error']))
             {
                 // Save data
-                $torrent = $torrentService->submit(
+                $torrent = $torrentService->add(
                     $file->getPathName(),
                     $user->getId(),
                     time(),
@@ -222,7 +398,7 @@ class TorrentController extends AbstractController
                     'torrent_info',
                     [
                         '_locale'   => $request->get('_locale'),
-                        'id'      => $torrent->getId()
+                        'torrentId'  => $torrent->getId()
                     ]
                 );
             }

src/Repository/TorrentLocalesRepository.php

@@ -20,4 +20,37 @@ class TorrentLocalesRepository extends ServiceEntityRepository
     {
         parent::__construct($registry, TorrentLocales::class);
     }
+
+    public function getTorrentLocales(int $id): ?TorrentLocales
+    {
+        return $this->createQueryBuilder('tl')
+            ->where('tl.id = :id')
+            ->setParameter('id', $id)
+            ->getQuery()
+            ->getOneOrNullResult()
+        ;
+    }
+
+    public function findLastTorrentLocales(int $torrentId): ?TorrentLocales
+    {
+        return $this->createQueryBuilder('tl')
+            ->where('tl.torrentId = :torrentId')
+            ->setParameter('torrentId', $torrentId)
+            ->orderBy('tl.id', 'DESC') // same to tl.added
+            ->setMaxResults(1)
+            ->getQuery()
+            ->getOneOrNullResult()
+        ;
+    }
+
+    public function findTorrentLocales(int $torrentId): array
+    {
+        return $this->createQueryBuilder('tl')
+            ->where('tl.torrentId = :torrentId')
+            ->setParameter('torrentId', $torrentId)
+            ->orderBy('tl.id', 'DESC') // same to tl.added
+            ->getQuery()
+            ->getResult()
+        ;
+    }
 }

src/Service/TorrentService.php

@@ -69,7 +69,28 @@ class TorrentService
                     ->findOneByIdField($id);
     }
 
-    public function submit(
+    public function getTorrentLocales(int $id): ?TorrentLocales
+    {
+        return $this->entityManagerInterface
+                    ->getRepository(TorrentLocales::class)
+                    ->getTorrentLocales($id);
+    }
+
+    public function findLastTorrentLocales(int $torrentId): ?TorrentLocales
+    {
+        return $this->entityManagerInterface
+                    ->getRepository(TorrentLocales::class)
+                    ->findLastTorrentLocales($torrentId);
+    }
+
+    public function findTorrentLocales(int $torrentId): array
+    {
+        return $this->entityManagerInterface
+                    ->getRepository(TorrentLocales::class)
+                    ->findTorrentLocales($torrentId);
+    }
+
+    public function add(
         string $filepath,
         int $userId,
         int $added,
@@ -78,7 +99,7 @@ class TorrentService
         bool $approved
     ): ?Torrent
     {
-        $torrent = $this->saveTorrent(
+        $torrent = $this->addTorrent(
           $this->getTorrentInfoNameByFilepath($filepath),
           $this->getTorrentKeywordsByFilepath($filepath)
         );
@@ -93,7 +114,7 @@ class TorrentService
 
         if (!empty($locales))
         {
-            $this->saveTorrentLocales(
+            $this->addTorrentLocales(
                 $torrent->getId(),
                 $userId,
                 $added,
@@ -102,7 +123,7 @@ class TorrentService
             );
         }
 
-        $this->saveTorrentSensitive(
+        $this->addTorrentSensitive(
             $torrent->getId(),
             $userId,
             $added,
@@ -113,7 +134,7 @@ class TorrentService
         return $torrent;
     }
 
-    public function saveTorrent(
+    public function addTorrent(
       string $filepath,
       string $keywords
     ): ?Torrent
@@ -129,7 +150,7 @@ class TorrentService
         return $torrent;
     }
 
-    public function saveTorrentLocales(
+    public function addTorrentLocales(
         int $torrentId,
         int $userId,
         int $added,
@@ -151,7 +172,7 @@ class TorrentService
         return $torrentLocales;
     }
 
-    public function saveTorrentSensitive(
+    public function addTorrentSensitive(
         int $torrentId,
         int $userId,
         int $added,

templates/default/torrent/edit/locales.html.twig

@@ -0,0 +1,85 @@
+{% extends 'default/layout.html.twig' %}
+{% block title %}{{'Edit torrent locales'|trans }} - {{ name }}{% endblock %}
+{% block main_content %}
+    <div class="padding-24-px margin-y-8-px border-radius-3-px background-color-night">
+        <div class="margin-b-24-px padding-b-16-px border-bottom-default">
+            <h1>
+                {{'Edit locales for torrent'|trans }}
+                <a href="{{ path('torrent_info', { torrentId : torrentId }) }}">#{{ torrentId }}</a>
+            </h1>
+        </div>
+        <form name="locales" method="post" action="{{ path('torrent_edit_locales', { torrentId : torrentId }) }}">
+            <div class="margin-y-16-px">
+                <label for="locales">
+                    {{'Content language'|trans }}
+                </label>
+                <sub class="opacity-0 parent-hover-opacity-09" title="{{ form.locales.attribute.placeholder }}">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" viewBox="0 0 16 16">
+                        <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
+                    </svg>
+                </sub>
+                {% for error in form.locales.error %}
+                    <div class="text-color-red margin-y-8-px">
+                        {{ error }}
+                    </div>
+                {% endfor %}
+                <div class="padding-t-8-px">
+                    <select class="width-100 padding-x-0" name="locales[]" multiple="multiple">
+                        {% for locale in locales %}
+                            {% if locale in form.locales.attribute.value %}
+                                <option class="padding-x-8-px padding-y-8-px" value="{{ locale }}" selected="selected">
+                                    {{ locale|locale_name(locale)|u.title }}
+                                </option>
+                            {% else %}
+                                <option class="padding-x-8-px padding-y-8-px" value="{{ locale }}">
+                                    {{ locale|locale_name(locale)|u.title }}
+                                </option>
+                            {% endif %}
+                        {% endfor %}
+                        {#
+                        <option class="padding-x-8-px padding-y-8-px" value="other">
+                            {{'Other...'|trans }}
+                        </option>
+                        #}
+                    </select>
+                </div>
+            </div>
+            <div class="text-right">
+                <a class="margin-r-8-px" href="{{ path('torrent_info', { torrentId : torrentId }) }}">
+                    {{'cancel'|trans }}
+                </a>
+                <input class="button-green" type="submit" value="{{'Submit'|trans }}" />
+            </div>
+        </form>
+    </div>
+    {% for edition in editions %}
+        <div class="padding-x-24-px padding-y-16-px margin-y-8-px border-radius-3-px {% if edition.active %}background-color-night-light{% else %}background-color-night{% endif %} ">
+            {% if edition.active %}
+                {{ edition.added | format_ago }}
+            {% else %}
+                <a href="{{ path('torrent_edit_locales', { torrentId : torrentId, torrentLocalesId : edition.id }) }}">
+                    {{ edition.added | format_ago }}
+                </a>
+            {% endif %}
+            {{ 'by'|trans }}
+            <a href="{{ path('user_info', { id : edition.user.id }) }}">
+                <img class="border-radius-50 border-color-green vertical-align-middle" src="{{ edition.user.identicon }}" alt="{{'identicon'|trans }}" />
+            </a>
+            <div class="float-right">
+                {% if edition.approved %}
+                    <span title="{{'Approved'|trans }}">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
+                        </svg>
+                    </span>
+                {% else %}
+                    <span title="{{'Waiting for approve'|trans }}">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-hourglass" viewBox="0 0 16 16">
+                            <path d="M2 1.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1h-11a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1-.5-.5zm2.5.5v1a3.5 3.5 0 0 0 1.989 3.158c.533.256 1.011.791 1.011 1.491v.702c0 .7-.478 1.235-1.011 1.491A3.5 3.5 0 0 0 4.5 13v1h7v-1a3.5 3.5 0 0 0-1.989-3.158C8.978 9.586 8.5 9.052 8.5 8.351v-.702c0-.7.478-1.235 1.011-1.491A3.5 3.5 0 0 0 11.5 3V2h-7z"/>
+                        </svg>
+                    </span>
+                {% endif %}
+            </div>
+        </div>
+    {% endfor %}
+{% endblock %}

templates/default/torrent/info.html.twig

@@ -20,11 +20,13 @@
 {% endmacro %}
 {% from _self import recursive_file_tree %}
 {% extends 'default/layout.html.twig' %}
-{% block title %}{{ 'Torrent'|trans }} #{{ torrent.id }} - {{ name }}{% endblock %}
+{% block title %}{% if file.name %}{{ file.name }} - {% endif %}{{ 'Torrent'|trans }} #{{ torrent.id }} - {{ name }}{% endblock %}
 {% block main_content %}
     <div class="padding-24-px margin-y-8-px border-radius-3-px background-color-night">
         <div class="padding-b-16-px">
-            <h1>{{ 'Torrent'|trans }} #{{ torrent.id }}</h1>
+            <h1>
+                {{ 'Torrent'|trans }} #{{ torrent.id }}
+            </h1>
             <a class="float-right margin-l-8-px" href="#" title="{{ 'Bookmark'|trans }}">
                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                     <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
@@ -43,198 +45,178 @@
             </a>
             #}
         </div>
+        <div class="padding-y-8-px border-bottom-default text-right">
+            {{ 'Common'|trans }}
+        </div>
+        <div class="padding-y-16-px">
             <table class="width-100">
                 <tbody>
                     {% if file.name %}
                         <tr>
-                        <td class="padding-y-8-px border-bottom-default text-right" colspan="2">
-                            {{ 'Name'|trans }}
+                            <td>
+                                {{ 'Filename'|trans }}
                             </td>
-                    </tr>
-                    <tr>
-                        <td class="padding-t-16-px font-size-12" colspan="2">
+                            <td>
                                 {{ file.name }}
                             </td>
                         </tr>
                     {% endif %}
                     {% if file.created %}
                         <tr>
-                        <td class="padding-y-8-px border-bottom-default text-right" colspan="2">
+                            <td>
                                 {{ 'Created'|trans }}
                             </td>
+                            <td>
+                                {{ file.created | format_date }}
+                            </td>
                         </tr>
+                    {% endif %}
+
+                    {% if file.size %}
                         <tr>
-                        <td class="padding-t-16-px font-size-12" colspan="2">
-                            {{ file.created | format_date }}
+                            <td>
+                                {{ 'Size'|trans }}
+                            </td>
+                            <td>
+                                {{ file.size | format_bytes }}
                             </td>
                         </tr>
                     {% endif %}
-                {% if file.hash.v1 %}
+                    {% if file.pieces %}
                         <tr>
-                        <td class="padding-y-8-px border-bottom-default text-right" colspan="2">
-                            {{ 'Info hash v1'|trans }}
+                            <td>
+                                {{ 'Pieces'|trans }}
+                            </td>
+                            <td>
+                                {{ file.pieces | format_number }}
                             </td>
                         </tr>
+                    {% endif %}
+                    {% if file.hash.v1 %}
                         <tr>
-                        <td class="padding-t-16-px font-size-12" colspan="2">
+                            <td>
+                                {{ 'Info hash v1'|trans }}
+                            </td>
+                            <td>
                                 {{ file.hash.v1 }}
                             </td>
                         </tr>
                     {% endif %}
                     {% if file.hash.v2 %}
                         <tr>
-                        <td class="padding-y-8-px border-bottom-default text-right" colspan="2">
+                            <td>
                                 {{ 'Info hash v2'|trans }}
                             </td>
-                    </tr>
-                    <tr>
-                        <td class="padding-t-16-px font-size-12" colspan="2">
+                            <td>
                                 {{ file.hash.v2 }}
                             </td>
                         </tr>
                     {% endif %}
-                {% if file['created by'] is defined %}
+                    {% if file.source %}
                         <tr>
-                        <td class="padding-y-8-px border-bottom-default text-right" colspan="2">
-                            {{ 'Generated'|trans }}
+                            <td>
+                                {{ 'Source'|trans }}
+                            </td>
+                            <td>
+                                {{ file.source }}
                             </td>
                         </tr>
+                    {% endif %}
+                    {% if file.software %}
                         <tr>
-                        <td class="padding-t-16-px font-size-12" colspan="2">
-                            {{ file['created by'] }}
+                            <td>
+                                {{ 'Software'|trans }}
+                            </td>
+                            <td>
+                                {{ file.software }}
                             </td>
                         </tr>
                     {% endif %}
-                {% if file.comment is defined %}
+                    {% if file.comment %}
                         <tr>
-                        <td class="padding-y-8-px border-bottom-default text-right" colspan="2">
+                            <td>
                                 {{ 'Comment'|trans }}
                             </td>
-                    </tr>
-                    <tr>
-                        <td class="padding-t-16-px font-size-12" colspan="2">
+                            <td>
                                 {{ file.comment }}
                             </td>
                         </tr>
                     {% endif %}
-                <tr>
-                    <td class="padding-y-8-px border-bottom-default text-right" colspan="2">
+                </tbody>
+            </table>
+        </div>
+        <div class="padding-y-8-px border-bottom-default text-right">
             {{ 'Files'|trans }}
-                    </td>
-                </tr>
+        </div>
+        <div class="padding-y-16-px">
             {% for tree in file.tree %}
-                    <tr>
-                        <td class="padding-y-16-px" colspan="2">
                 {{ recursive_file_tree(tree) }}
-                        </td>
-                    </tr>
             {% endfor %}
-                <tr>
-                    <td class="padding-y-8-px border-bottom-default text-right" colspan="2">
+        </div>
+        <div class="padding-y-8-px border-bottom-default text-right">
             {{ 'Trackers'|trans }}
-                    </td>
-                </tr>
-                <tr>
-                    <td colspan="2">&nbsp;</td>
-                </tr>
+        </div>
+        <div class="padding-y-16-px">
             {% for tracker in trackers %}
-                    <tr>
-                        <td class="padding-y-4-px font-size-12" colspan="2">
+                <div class="padding-y-4-px">
                     {{ tracker }}
-                        </td>
-                    </tr>
+                </div>
             {% endfor %}
-                {#
-                <tr>
-                    <td class="padding-y-4-px font-size-12">
-                        {{ file.announce }}
-                    </td>
-                    <td class="padding-y-4-px text-right">
-                        {% if file.announce not in trackers %}
-                            <span title="{{ 'Blocked'|trans }}">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" viewBox="0 0 16 16">
-                                    <path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2z"/>
-                                </svg>
-                            </svg>
-                        {% endif %}
-                    </td>
-                </tr>
-                #}
             {% for announces in trackers %}
                 {% for tracker in announces %}
-                        <tr>
-                            <td class="padding-y-4-px font-size-12">
-                                {{ tracker }}
-                            </td>
-                            <td class="padding-y-4-px text-right">
+                    <div class="padding-y-4-px">
                         {% if tracker not in trackers %}
-                                    <span title="{{ 'Blocked'|trans }}">
+                            {{ tracker }}
+                            <span class="float-right" title="{{ 'Blocked'|trans }}">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" viewBox="0 0 16 16">
                                     <path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2z"/>
                                 </svg>
-                                    </svg>
+                            </span>
                         {% endif %}
-                            </td>
-                        </tr>
+                    </div>
                 {% endfor %}
             {% endfor %}
-                <tr>
-                    <td colspan="2">&nbsp;</td>
-                </tr>
-                <tr>
-                    <td class="padding-y-8-px border-bottom-default text-right" colspan="2">
+        </div>
+        <div class="padding-y-8-px text-right">
+            <a class="margin-r-4-px opacity-0 parent-hover-opacity-09" href="{{ path('torrent_edit_locales', { torrentId : torrent.id }) }}" title="{{'Edit'|trans }}">
+                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" viewBox="0 0 16 16">
+                    <path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z"/>
+                </svg>
+            </a>
             {{ 'Locales'|trans }}
-                    </td>
-                </tr>
-                <tr>
-                    <td colspan="2">&nbsp;</td>
-                </tr>
+            <div class="padding-b-8-px border-bottom-default"></div>
+            <div class="padding-y-16-px text-left">
                 {% if torrent.locales %}
-                    <tr>
-                        <td class="text-right" colspan="2">
-                            <a class="button button-green" href="#">
-                                {{'Edit'|trans }}
-                            </a>
-                        </td>
-                    </tr>
-                {% else %}
-                    <tr>
-                        <td class="text-right" colspan="2">
-                            <a class="button button-green" href="#">
-                                {{'Add'|trans }}
-                            </a>
-                        </td>
-                    </tr>
+                    <div class="padding-y-4-px">
+                        {% for i, locale in torrent.locales.value %}{% if i > 0 %},{% endif %} {{ locale|locale_name(locale)|u.title }}{% endfor %}
+                    </div>
                 {% endif %}
-                <tr>
-                    <td colspan="2">&nbsp;</td>
-                </tr>
-                <tr>
-                    <td class="padding-y-8-px border-bottom-default text-right" colspan="2">
-                        {{ 'Pages'|trans }}
-                    </td>
-                </tr>
-                <tr>
-                    <td colspan="2">&nbsp;</td>
-                </tr>
-                {% if torrent.pages %}
-                    <tr>
-                        <td class="text-right" colspan="2">
-                            <a class="button button-green" href="#">
-                                {{'Edit'|trans }}
+            </div>
+        </div>
+        <div class="padding-y-8-px text-right">
+            <a class="margin-r-4-px opacity-0 parent-hover-opacity-09" href="{{ path('torrent_edit_locales', { torrentId : torrent.id }) }}" title="{{'Edit'|trans }}">
+                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" viewBox="0 0 16 16">
+                    <path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z"/>
+                </svg>
             </a>
-                        </td>
-                    </tr>
-                {% else %}
-                    <tr>
-                        <td class="text-right" colspan="2">
-                            <a class="button button-green" href="#">
+            {{ 'Pages'|trans }}
+            <div class="padding-b-8-px border-bottom-default"></div>
+            <div class="padding-y-16-px text-left">
+                {% for page in torrent.pages %}
+                    <div>
+                        {{ page }}
+                    </div>
+                {% endfor %}
+                <form name="pages" method="post" action="{{ path('page_submit') }}">
+                    <input type="hidden" name="torrentId" value="{{ torrent.id }}" />
+                    <button type="submit" class="button-green">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" viewBox="0 0 16 16">
+                            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z"/>
+                        </svg>
                         {{'Add'|trans }}
-                            </a>
-                        </td>
-                    </tr>
-                {% endif %}
-            </tbody>
-        </table>
+                    </button>
+                </form>
+            </div>
+        </div>
     </div>
 {% endblock %}